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

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，它没有内容并且绝对位于弹出窗口下方并且上面有模糊。

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

还有一个 CSS class 更新了主 div

#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>

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

How to Make Popup with Blurred Background

html

javascript

css

blur

popup