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

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>