How to Add Popup using jQuery

How to Add Popup using jQuery

jQuery   October 23, 2018

Add popup on any div using jQuery :-

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;
}