如何制作背景模糊的弹出窗口

Question

我正在尝试在现有页面上添加一个弹出窗口，该弹出窗口在页面加载 4.5 秒后打开。 现在我试图在弹出窗口打开时在背景上添加模糊效果。 我尝试了一些不同的方法在主 div 上添加模糊效果，但它没有变得模糊，而是弹出窗口本身模糊而不是主背景 div。 以下是我目前正在尝试的代码片段。

 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>

应用代码后，我的弹出窗口变得模糊而不是背景。 请大家看看并帮助我。 提前致谢

Answer 1

出于测试目的，我将您的计时器更改为 1，以便它立即弹出。

但是，您想要做的是创建一个单独的 div，该 div 没有内容并且绝对位于弹出窗口下方并且上面有模糊。

 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

我通过稍微修改脚本尝试了一个解决方案，它对我有用。 以下是更新后的脚本

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

和一个用主 div 更新的 CSS 类

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

Answer 3

一个选项可能是在流程中首先设置弹出窗口并模糊接下来的任何内容：

这是您代码中的想法：

 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>