"Success Message Pop Up Bootstrap Modal"
Bootstrap 4.0.0 Snippet by Ranjith Ramesh

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<!--Model Popup starts-->
<div class="container">
<div class="row">
<a class="btn btn-primary" data-toggle="modal" href="#ignismyModal">open Popup</a>
<div class="modal fade" id="ignismyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label=""><span>×</span></button>
</div>
<div class="modal-body">
<div class="thank-you-pop">
<img src="http://goactionstations.co.uk/wp-content/uploads/2017/03/Green-Round-Tick.png" alt="">
<h1>Thank You!</h1>
<p>Your submission is received and we will contact you soon</p>
<h3 class="cupon-pop">Your Id: <span>12345</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Model Popup ends-->
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
/*--thank you pop starts here--*/
.thank-you-pop{
width:100%;
padding:20px;
text-align:center;
}
.thank-you-pop img{
width:76px;
height:auto;
margin:0 auto;
display:block;
margin-bottom:25px;
}
.thank-you-pop h1{
font-size: 42px;
margin-bottom: 25px;
color:#5C5C5C;
}
.thank-you-pop p{
font-size: 20px;
margin-bottom: 27px;
color:#5C5C5C;
}
.thank-you-pop h3.cupon-pop{
font-size: 25px;
margin-bottom: 40px;
color:#222;
display:inline-block;
text-align:center;
padding:10px 20px;
border:2px dashed #222;
clear:both;
font-weight:normal;
}
.thank-you-pop h3.cupon-pop span{
color:#03A9F4;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: