Add popup on any div using jQuery :-
HTML : -
JQuery : -
CSS : -
HTML : -
<div class="disclaimer custom-popup">
<div class="container">
<div class="close">X</div>
Lorem Ipsum is simply dummy text.
</div>
</div>
<div class="disclaimer-show">Disclaimer</div>
JQuery : -
jQuery(document).ready(function(){
/*Disclaimer popup*/
jQuery('.disclaimer').hide();
jQuery(".disclaimer-show").bind('click', function () {
jQuery(".disclaimer").show();
jQuery(this).hide();
})
jQuery('.close').bind('click', function () {
jQuery('.disclaimer').hide();
jQuery('.disclaimer-show').show();
})
});
CSS : -
.custom-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.85);
z-index: 9999;
overflow: auto;
padding: 25px;
}
.custom-popup .container {
background-color: #fff;
max-width: 1170px;
margin: 50px auto;
border: 1px solid #0098DB;
padding: 30px 50px;
position: relative;
}
.custom-popup .close {
width: 32px;
height: 32px;
background-color: #0098DB;
text-align: center;
color: #fff;
font-size: 22px;
position: absolute;
right: -15px;
top: -15px;
line-height: 32px;
}
Thanks for all you efforts for newbie
ReplyDelete