"Popup Ad Banner"
Bootstrap 4.1.1 Snippet by tejlavwaladhaval

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Modal -->
<div class="modal fade" id="AdPopup" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div id="ad_content" class="modal-content">
<img src="https://picsum.photos/350/500" height="350" weight="500">
</div>
<a id="ad_close_btn" data-dismiss="modal" aria-label="Close" aria-hidden="true">
<i class="fas fa-times"></i>
</a>
</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
#ad_content{
padding:0px;
border-radius:0px;
}
#ad_close_btn{
position:absolute;
top:-5px;
right:-5px;
height: 30px;
line-height: 25px;
width: 30px;
border-radius: 50%;
background-color: #fff;
text-align: center;
display:none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#ad_content:hover + #ad_close_btn{
display:inline;
}
#ad_close_btn > i{
color:#000000;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$(document).ready(function(){
$('#AdPopup').modal('show');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
animated sinin and signup panel. animated login and registeration page, popup,
Open in chat (popup-box chat-popup)
eCommerce Quick view Popup & Product row

Questions / Comments: