custom modal popup bootstrap 4.3.1 css3



index.html

<html lang="en"> <head> <title>Bootstrap Pup up</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container text-center"> <hr> <h2>Modal Example</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">LAUNCH MODEL WARNING</button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Web design</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="row"> <div class="col-3 text-center"> <img src="card-image.png" alt="Card Image" class="img-fluid z-depth-1-half rounded-circle"> <div style="height: 10px"></div> <p class="title mb-0">Soeng Souy</p> <p class="text-muted " style="font-size: 13px">Web Designer</p> </div> <div class="col-9 text-left"> <p>SoengSouy.Webdesign Is a free online learning program that introduces methods and how to coding.</p> <p class="card-text text-left"> <strong>How to Learn Website Design Template ,Layout, Footer, Panel Right ,Panel Left,Other.</strong> </p> </div> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>

styles.css


.btn-primary { color: #fff!important; font-weight: 500; background-color: #2bbbad !important; border-radius: 1px; } .btn { margin: .375rem; color: inherit; text-transform: uppercase; word-wrap: break-word; white-space: normal; cursor: pointer; border: 0; border-radius: 1px; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),
0 2px 10px 0 rgba(0,0,0,0.12); padding: .84rem 2.14rem; font-size: .81rem; } .modal-dialog .modal-header { background-color: #fb3; border-radius: 1px; color: #fff; } .modal-dialog .modal-header { border: 0; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); } .modal-footer { -ms-flex-pack: center !important; justify-content: center !important; } .modal-content { font-weight: 600; border-radius: 1px; box-shadow: 6px 6px 3px #ffc832b0; } .btn-danger { font-weight: 700; } .z-depth-1-half { -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),
0 4px 15px 0 rgba(0,0,0,0.15) !important; box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),
0 4px 15px 0 rgba(0,0,0,0.15) !important; }




Reactions

Post a Comment

0 Comments