"Modal Styles"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!------------------ Modal Style : Demo - 1 ---------------> <div class="container-fluid py-5" style="background:#F1CD52"> <div class="container"> <h3 class="text-center" style="color:#fff !important;text-shadow: 1px 1px 1px #000;">Hover Effect Style : Demo - 1</h3> <div class="row my-5 justify-content-center"> <div class="col-md-12"> <div class="modal-box1"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal"> view modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <div class="icon"><i class="fa fa-envelope"></i></div> <h3 class="title">Subscribe!</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p> <div class="form-group"> <input class="form-control" type="name" placeholder="Name"> </div> <div class="form-group"> <input class="form-control" type="email" placeholder="Enter email address"> </div> <button class="subscribe">Subscribe</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!------------------ Modal Style : Demo - 2 ---------------> <div class="container-fluid py-5" style="background: linear-gradient(to right,#26de81,#38ef7d,#26de81)"> <div class="container"> <h3 class="text-center" style="color:#fff !important;text-shadow: 1px 1px 1px #000;">Hover Effect Style : Demo - 2</h3> <div class="row my-5 justify-content-center"> <div class="col-md-12"> <div class="modal-box2"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg show-modal" data-toggle="modal" data-target="#myModal2"> view modal </button> <!-- Modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <div class="modal-body"> <div class="icon"><i class="fa fa-check"></i></div> <h3 class="title">Woohoo! <br> Lorem ipsum dolor sit amet</h3> <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid commodi consequatur cumque </p> <button class="subscribe">Subscribe</button> </div> </div> </div> </div> </div> </div> </div> </div> </div>
*{outline:none;} h3{margin: 2em 0em;} .my-5{margin:7em 0em !important;} /*********************** Modal Demo - 1 *******************/ .modal-box1{font-family:Comfortaa,cursive} .modal-box1 .show-modal{color:#fff;background:linear-gradient(45deg,#646d94,#0e99af);font-size:18px;font-weight:600;text-transform:capitalize;padding:10px 15px;margin:80px auto 0;border:none;outline:0;display:block;transition:all .3s} .modal-box1 .show-modal:focus,.modal-box1 .show-modal:hover{color:#fff;border:none;outline:0;text-decoration:none;text-shadow:0 0 3px #000;box-shadow:5px 5px 10px rgba(0,0,0,.4)} .modal-backdrop.in{opacity:0} .modal-box1 .modal{top:70px!important} .modal-box1 .modal-dialog{width:400px;margin:30px auto 10px} .modal-box1 .modal-dialog .modal-content{background:#dbecf6;border-radius:25px;box-shadow:0 0 25px -8px #555;position:relative} .modal-box1 .modal-dialog .modal-content:before{content:"";background:linear-gradient(45deg,#646d94,#0e99af);width:100%;height:28%;border-radius:25px 25px 0 0;position:absolute;top:-1px;left:0} .modal-box1 .modal-dialog .modal-content .close{color:#089bab;background-color:#fff;font-size:33px;line-height:28px;height:28px;width:28px;opacity:1;border-radius:50%;box-shadow:0 0 5px #555;position:absolute;left:auto;right:-7px;top:-7px;z-index:1;transition:all .3s} .modal-box1 .modal-dialog .modal-content .close span{margin:1px 0 0 0;display:block} .modal-box1 .modal-dialog .modal-content .close:hover{color:#fff;background-color:#0e99af} .modal-box1 .modal-dialog .modal-content .modal-body{padding:30px 30px!important} .modal-box1 .modal-dialog .modal-content .modal-body .icon{color:#f2f7fb;font-size:80px;text-align:center;line-height:100px;margin:0 0 35px} .modal-box1 .modal-dialog .modal-content .modal-body .title{color:#009688;font-size:45px;font-weight:700;text-transform:capitalize;text-align:center;margin:0 0 10px 0} .modal-box1 .modal-dialog .modal-content .modal-body .description{color:#777;font-size:13px;text-align:center;margin:0 0 15px} .modal-content .form-control{color:#646d94;font-size:16px;text-align:center;letter-spacing:1px;height:40px;padding:2px 15px 2px 15px;border-radius:50px;display:inline-block;transition:all .3s} .modal-content .form-control::placeholder{color:#909090;font-size:14px} .modal-content .form-control:focus,.modal-content .form-control:hover{box-shadow:0 0 0 transparent,0 0 0 transparent,0 0 0 transparent;border:1px solid #009688} .modal-box1 .modal-dialog .modal-content .modal-body .subscribe{color:#fff;background:linear-gradient(45deg,#646d94,#0e99af);font-size:18px;font-weight:700;text-transform:uppercase;padding:10px 38px;margin:0 auto;border:none;border-radius:50px;overflow:hidden;display:block;position:relative;z-index:1;transition:all .3s} .modal-box1 .modal-dialog .modal-content .modal-body .subscribe:before{content:'';height:100%;width:100%;background:linear-gradient(45deg,#0e99af,#646d94);border-radius:50px;transform:scale(.97,.85);position:absolute;left:0;top:0;z-index:-1;transition:all .3s} .modal-box1 .modal-dialog .modal-content .modal-body .subscribe:hover{color:#0e99af} .modal-box1 .modal-dialog .modal-content .modal-body .subscribe:hover:before{background:#fff} @media only screen and (max-width:768px){.modal-dialog{width:400px!important} } @media only screen and (max-width:576px){.modal-dialog{width:95%!important} .modal-box1 .modal-dialog .modal-content .modal-body .title{font-size:33px} } /*********************** Modal Demo - @ *******************/ .modal-box2{font-family:'Varela Round',sans-serif} .modal-box2 .show-modal{color:#222;background-color:#fff;font-size:18px;font-weight:600;text-transform:capitalize;padding:10px 15px;margin:80px auto 0;border:none;outline:0;box-shadow:0 0 10px #555;display:block} .modal-box2 .show-modal:focus,.modal-box2 .show-modal:hover{color:#222;background-color:#fff;border:none;outline:0;text-decoration:none} .modal-backdrop.in{opacity:.1} .modal-box2 .modal{top:70px!important} .modal-box2 .modal-dialog{width:400px;margin:30px auto 10px} .modal-box2 .modal-dialog .modal-content{border-radius:25px;box-shadow:0 0 25px -8px #555} .modal-box2 .modal-dialog .modal-content .close{color:#e74c3c;background-color:#fff;font-size:28px;text-shadow:none;line-height:33px;height:33px;width:33px;opacity:1;border-radius:50%;box-shadow:0 0 5px #555;position:absolute;left:auto;right:-5px;top:-5px;z-index:1;transition:all .3s} .modal-box2 .modal-dialog .modal-content .close span{margin:-1px 0 0 0;display:block} .modal-box2 .modal-dialog .modal-content .close:hover{color:#fff;background-color:#e74c3c} .modal-box2 .modal-dialog .modal-content .modal-body{padding:50px 20px!important} .modal-box2 .modal-dialog .modal-content .modal-body .icon{color:#26de81;font-size:36px;text-align:center;text-shadow:4px 0 0 #fff,0 -3px 0 #fff;line-height:40px;height:50px;width:50px;margin:0 auto 30px;position:relative;z-index:1} .modal-box2 .modal-dialog .modal-content .modal-body .icon:after{content:'';height:45px;width:45px;border:5px solid #c1c1c1;border-radius:50%;position:absolute;left:-5px;top:3px;z-index:-1} .modal-box2 .modal-dialog .modal-content .modal-body .title{margin:0 0 20px 0;font-size:20px;color:#222;text-transform:capitalize;font-weight:600;text-align:center} .modal-box2 .modal-dialog .modal-content .modal-body .description{color:#999;text-align:center;margin:0 0 15px} .modal-box2 .modal-dialog .modal-content .modal-body .subscribe{color:#fff;background-color:#26de81;font-size:18px;text-transform:uppercase;padding:10px 20px;margin:0 auto;border:0 solid #222;border-radius:50px;overflow:hidden;display:block;position:relative;z-index:1;transition:all .3s} .modal-box2 .modal-dialog .modal-content .modal-body .subscribe:hover{background-color:#222} @media only screen and (max-width:768px){.modal-dialog{width:400px!important} } @media only screen and (max-width:576px){.modal-dialog{width:auto!important} }

Related: See More


Questions / Comments: