How to Make Popup with Blurred Background

Question

I am trying to add a popup on my existing page, the Popup opens 4.5 seconds after the page has loaded. Now I am trying to add a blur effect on the background when the Popup opens. I tried some different ways to add a blur effect on the main div but it is not getting blurred but the popup itself blurred rather than the main background div. Below is the code snippet of what I am trying so far.

 function PopUp(hideOrshow) { if ( hideOrshow == 'hide' )document . getElementById( 'ac-wrapper' ) . style . display = "none"; else document . getElementById( 'ac-wrapper' ) . removeAttribute( 'style' ); } window . onload = function () { setTimeout( function () { PopUp( 'show' ); }, 4500 ); }

 #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 1001; -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } #popup { width: 555px; background: #f6f6f6; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 20%; left: 36%; padding: 25px; /*-webkit-filter: blur(0); -moz-filter: blur(0); -o-filter: blur(0); -ms-filter: blur(0); filter: blur(0);*/ } .popup-close { width: 20px; float: right; } .popup-logo { width: 180px; margin-top: 25px; } .pmh-top { margin-top: 20px; color: #4D4D4E; } .pmp-top { margin-top: 10px; } .pm-list { list-style: none; margin-left: 0px; padding-left: 0px; } .pm-list li { height: 40px; margin-bottom: 10px; padding-left: 45px; padding-top: 10px; } .reference-id { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/reference-id.png"); } .company-info { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/company-info.png"); } .reference-id, .company-info { background-repeat: no-repeat; background-size: auto; } .popup-field { text-align: center; } .popup-btn { width: 100% !important; background-color: #27546B !important; color: #FFFFFF !important; } .pmp-bottom { font-size: 11px; line-height: 17px; margin-top: -10px; } .blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>this is complete website normal background page, I am trying to blur<div> <div id="ac-wrapper" style='display:none;'> <div id="popup"> <a href="<?php echo base_url() ; ?>"><img src="<?php echo base_url() ; ?>assets/frontend/images/popup/cross-icon.png" alt="close popup" class="popup-close" /></a> <img src="<?php echo base_url() ; ?>assets/frontend/images/popup/logo.png" alt="logo" class="popup-logo" /> <h2 class="pmh-top">We'll email prices for safe keeping!</h2> <p class="pmp-top">The email contains the following</p> <ul class="pm-list"> <li class="reference-id">Your reference ID for quick booking</li> <li class="company-info">Information regarding Us</li> </ul> <form method="post"> <input type="email" placeholder="Enter your email address" class="popup-field" /> <input type="submit" value="View Prices Now" class="popup-btn" onClick="PopUp('hide')" /> </form> <p class="pmp-bottom">Keeping your information safe is key to us, all information you entered will be kept safe in compliance to law.</p> </div> </div>

After applying the code, my popup is getting blurred not the background one. Please have a look everyone and help me on that. Thanks in advance

Answer 1

For testing purposes I changed your timer to 1 so it pops up right away.

However, what you want to do is create a separate div that has no content and is absolutely positioned below the popup and that has the blur on it.

 function PopUp(hideOrshow) { if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; else document.getElementById('ac-wrapper').removeAttribute('style'); } window.onload = function() { setTimeout(function() { PopUp('show'); }, 1); }

 #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; } #overlay { width: 100vw; top:0; left:0; height: 100vh; position: absolute; z-index: 1002; background: rgba(0, 0, 0, .6); -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); } #popup { width: 555px; background: #f6f6f6; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; z-index:1003; top: 20%; left: 36%; padding: 25px; /*-webkit-filter: blur(0); -moz-filter: blur(0); -o-filter: blur(0); -ms-filter: blur(0); filter: blur(0);*/ } .popup-close { width: 20px; float: right; } .popup-logo { width: 180px; margin-top: 25px; } .pmh-top { margin-top: 20px; color: #4D4D4E; } .pmp-top { margin-top: 10px; } .pm-list { list-style: none; margin-left: 0px; padding-left: 0px; } .pm-list li { height: 40px; margin-bottom: 10px; padding-left: 45px; padding-top: 10px; } .reference-id { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/reference-id.png"); } .company-info { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/company-info.png"); } .reference-id, .company-info { background-repeat: no-repeat; background-size: auto; } .popup-field { text-align: center; } .popup-btn { width: 100% !important; background-color: #27546B !important; color: #FFFFFF !important; } .pmp-bottom { font-size: 11px; line-height: 17px; margin-top: -10px; } .blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>this is complete website normal background page, I am trying to blur <div> <div id="ac-wrapper" style='display:none;'> <div id="overlay"></div> <div id="popup"> <a href="<?php echo base_url() ; ?>"><img src="<?php echo base_url() ; ?>assets/frontend/images/popup/cross-icon.png" alt="close popup" class="popup-close" /></a> <img src="<?php echo base_url() ; ?>assets/frontend/images/popup/logo.png" alt="logo" class="popup-logo" /> <h2 class="pmh-top">We'll email prices for safe keeping!</h2> <p class="pmp-top">The email contains the following</p> <ul class="pm-list"> <li class="reference-id">Your reference ID for quick booking</li> <li class="company-info">Information regarding Us</li> </ul> <form method="post"> <input type="email" placeholder="Enter your email address" class="popup-field" /> <input type="submit" value="View Prices Now" class="popup-btn" onClick="PopUp('hide')" /> </form> <p class="pmp-bottom">Keeping your information safe is key to us, all information you entered will be kept safe in compliance to law.</p> </div> </div>

Answer 2

I tried a solution by modifying script a bit and it worked for me. Below is the updated script

function PopUp(hideOrshow) {
    if ( hideOrshow == 'hide' )document . getElementById( 'ac-wrapper' ) . style . display = "none";
    else document . getElementById( 'ac-wrapper' ) . removeAttribute( 'style' );
    

    //I Add this part new
    if ( hideOrshow == 'show' ) {
        $("#wrapper").addClass('blur');
    } else {
        $("#wrapper").removeClass('blur');
    }
    
}
window . onload = function () {
    setTimeout( function () {
        PopUp( 'show' );
    }, 4500 );
}

And a one CSS class updated with main div

#wrapper.blur {
        -webkit-filter: blur(8px);
           -moz-filter: blur(8px);
             -o-filter: blur(8px);
            -ms-filter: blur(8px);
                filter: blur(8px);
    }

Answer 3

An option could be to set the popup first in the flow and blur anything that comes next :

here is the idea from your code:

 function PopUp(hideOrshow) { if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; else document.getElementById('ac-wrapper').removeAttribute('style'); } window.onload = function() { setTimeout(function() { PopUp('show'); }, 4500); }

 #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 1001; } #popup { width: 555px; background: #f6f6f6; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 20%; left: 36%; padding: 25px; } .popup-close { width: 20px; float: right; } .popup-logo { width: 180px; margin-top: 25px; } .pmh-top { margin-top: 20px; color: #4D4D4E; } .pmp-top { margin-top: 10px; } .pm-list { list-style: none; margin-left: 0px; padding-left: 0px; } .pm-list li { height: 40px; margin-bottom: 10px; padding-left: 45px; padding-top: 10px; } .reference-id { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/reference-id.png"); } .company-info { background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/company-info.png"); } .reference-id, .company-info { background-repeat: no-repeat; background-size: auto; } .popup-field { text-align: center; } .popup-btn { width: 100% !important; background-color: #27546B !important; color: #FFFFFF !important; } .pmp-bottom { font-size: 11px; line-height: 17px; margin-top: -10px; } #ac-wrapper:not([style]) ~* { -webkit-filter: blur(2px); -moz-filter: blur(2px); -o-filter: blur(2px); -ms-filter: blur(2px); filter: blur(2px); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -<div id="ac-wrapper" style='display:none;'> <div id="popup"> <a href="<?php echo base_url() ; ?>"><img src="<?php echo base_url() ; ?>assets/frontend/images/popup/cross-icon.png" alt="close popup" class="popup-close" /></a> <img src="<?php echo base_url() ; ?>assets/frontend/images/popup/logo.png" alt="logo" class="popup-logo" /> <h2 class="pmh-top">We'll email prices for safe keeping!</h2> <p class="pmp-top">The email contains the following</p> <ul class="pm-list"> <li class="reference-id">Your reference ID for quick booking</li> <li class="company-info">Information regarding Us</li> </ul> <form method="post"> <input type="email" placeholder="Enter your email address" class="popup-field" /> <input type="submit" value="View Prices Now" class="popup-btn" onClick="PopUp('hide')" /> </form> <p class="pmp-bottom">Keeping your information safe is key to us, all information you entered will be kept safe in compliance to law.</p> </div> </div> <div>1 this is complete website normal background page, I am trying to blur</div> <div>2 this is complete website normal background page, I am trying to blur</div> <div>3 this is complete website normal background page, I am trying to blur </div>