如何使背景模糊的弹出窗口

时间：2020-10-12 17:04:59

标签： javascript html css popup blur

我正在尝试在现有页面上添加一个弹出窗口，该弹出窗口在页面加载后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>

应用代码后，我的弹出窗口变得模糊了，而不是背景模糊了。请大家看看，并在此方面为我提供帮助。预先感谢

3 个答案:

答案 0 :(得分：0)

出于测试目的，我将您的计时器更改为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>

答案 1 :(得分：0)

我尝试了一些修改脚本的方法，它对我有用。下面是更新的脚本

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

还有一个用main div更新的CSS类

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

答案 2 :(得分：0)

一个选项可以是在流中首先设置弹出窗口，然后模糊随后出现的所有内容：

这是您代码中的想法：

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>

相关问题
最新问题