"Modal Styles"
Bootstrap 4.1.1 Snippet by Siddharth Panchal

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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;">Modal 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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*{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}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard
Card Styles
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: