个人中心
gpt4 book ai didi

javascript - 多个模糊的弹出窗口

转载 作者：行者123 更新时间：2023-11-28 04:49:42 26 4
gpt4 key购买 nike

我试图在弹出窗口出现时模糊屏幕。在 jsfiddle 的前两个弹出窗口中，模糊工作正常，但两个弹出窗口中出现相同的信息，而每个弹出窗口中应该有不同的信息。在第二组弹出窗口中，每个弹出窗口中的信息都是正确的，但没有我想要的模糊效果。我尝试结合两组代码来实现我想要的，但没有成功。有人可以帮助编写此代码，以便我在两个弹出窗口中同时获得模糊和正确的信息。谢谢，

https://jsfiddle.net/vibajajo64/hjmr93zt/3/ 

 <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta name="robots" content="noindex, nofollow">
      <meta name="googlebot" content="noindex, nofollow">

        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>



      <style type="text/css">
        .popup {
        position:fixed;
        top:0px;
        left:0px;
        bottom:0px;
        right:0px;  
        margin:auto;
        width:200px;
        height:150px;
        font-family:verdana;
        font-size:13px;
        padding:10px;
        background-color:rgb(240,240,240);
        border:2px solid grey;
        z-index:100000000000000000;
    }

     .blur   {
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    }

    .cancel {
        display:relative;
        cursor:pointer;
        margin:0;
        float:right;
        height:10px;
        width:14px;
        padding:0 0 5px 0;
        background-color:red;
        text-align:center;
        font-weight:bold;
        font-size:11px;
        color:white;
        border-radius:3px;
        z-index:100000000000000000;
    }

    .cancel:hover {
        background:rgb(255,50,50);
    }

    #overlay    {
        position: fixed;
        display: none;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background: rgba(255,255,255,.8);
        z-index: 999;
    }
    #popup {
        position: absolute;
        width: 400px;
        height: 200px;
        background: rgb(255,255,255);
        border: 5px solid rgb(90,90,90);
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
    }

      </style>

      <title> by JKurcik</title>

    <script type='text/javascript'>//<![CDATA[

    function openPopup(el) {
       $('.popup').hide();
       $('#' + el).fadeIn(200);   
    }

    function closePopup() {
        $('.popup').fadeOut(300);
    }


    //]]> 

    </script>

    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){
    myBlurFunction = function(state) {
        /* state can be 1 or 0 */
        var containerElement = document.getElementById('main_container');
        var overlayEle = document.getElementById('overlay');

        if (state) {
            overlayEle.style.display = 'block';
            containerElement.setAttribute('class', 'blur');
        } else {
            overlayEle.style.display = 'none';
            containerElement.setAttribute('class', null);
        }
    };
    }//]]> 

    </script>

    </head>

    <body>

    <div id="overlay"><div id="popup">http://www.google.com <a href="javascript:myBlurFunction(0);">hide</a></div></div>
    <div id="main_container">
        <a href="javascript:myBlurFunction(1);">OPEN POPUP</a><br/><br/>


    <div id="overlay"><div id="popup">http://www.yahoo.com<a href="javascript:myBlurFunction(0);">hide</a></div></div>
    <div id="main_container">
        <a href="javascript:myBlurFunction(1);">OPEN POPUP</a><br/><br/>




    <button onClick="openPopup('div1');">open div1</button>
    <div id="div1" class="popup" style="display:none;">
        This is a test message div1
        <div class="cancel" onclick="closePopup();"></div>
    </div>


    <button onClick="openPopup('div2');">open div2</button>
    <div id="div2" class="popup" style="display:none;">
        This is a test message div2
        <div class="cancel" onclick="closePopup();"></div>
    </div>        

    </body>

    </html>

最佳答案

你可以试试这个。如果有任何问题，请随时问我。希望这能回答您的问题。

点击源代码下方的演示按钮。如果您认为这符合您的期望，请不要忘记接受此答案。 

.popup {
  position: fixed;
  top: 0px;
  left: 0px;
  https: //jsfiddle.net/user/dashboard/
  bottom:0px;
  right: 0px;
  margin: auto;
  width: 200px;
  height: 150px;
  font-family: verdana;
  font-size: 13px;
  padding: 10px;
  background-color: rgb(240, 240, 240);
  border: 2px solid grey;
  z-index: 100000000000000000;
}

.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.cancel {
  display: relative;
  cursor: pointer;
  margin: 0;
  float: right;
  height: 10px;
  width: 14px;
  padding: 0 0 5px 0;
  background-color: red;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  color: white;
  border-radius: 3px;
  z-index: 100000000000000000;
}

.cancel:hover {
  background: rgb(255, 50, 50);
}

#overlay1,
#overlay2 {
  position: fixed;
  display: none;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(255, 255, 255, .8);
  z-index: 999;
}

#popup {
  position: absolute;
  width: 400px;
  height: 200px;
  background: rgb(255, 255, 255);
  border: 5px solid rgb(90, 90, 90);
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
}
<body>
  <div id="overlay1">
    <div id="popup">
      <h3>POPUP 1</h3> http://www.google.com <a href="javascript:myBlurFunction(0, 'popup1');"> hide</a></div>
  </div>
  <div id="main_container1">
    <a href="javascript:myBlurFunction(1, 'popup1');">OPEN POPUP 1</a><br/>
  </div>
  <br/>

  <div id="overlay2">
    <div id="popup">
      <h3>POPUP 2</h3> http://www.yahoo.com<a href="javascript:myBlurFunction(0, 'popup2');"> hide</a></div>
  </div>
  <div id="main_container2">
    <a href="javascript:myBlurFunction(1, 'popup2');">OPEN POPUP 2</a><br/>
  </div>
</body>
<script type="text/javascript">
  var myBlurFunction = function(state, popup_type) {
    if (state == 1) {
      if (popup_type == "popup1") {
        var containerElement = document.getElementById('main_container1');
        var overlayEle = document.getElementById('overlay1');
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
      } else {
        var containerElement = document.getElementById('main_container2');
        var overlayEle = document.getElementById('overlay2');
        overlayEle.style.display = 'block';
        containerElement.setAttribute('class', 'blur');
      }
    } else {
      if (popup_type == "popup1") {
        var containerElement = document.getElementById('main_container1');
        var overlayEle = document.getElementById('overlay1');
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', 'null');
      } else {
        var containerElement = document.getElementById('main_container2');
        var overlayEle = document.getElementById('overlay2');
        overlayEle.style.display = 'none';
        containerElement.setAttribute('class', 'null');
      }
    }
  };
</script>

关于javascript - 多个模糊的弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43033782/

26 4 0
文章推荐： html - 在 HTML5 中使用 null 实体(例如 �)是否有效？
文章推荐： html - 如何使用 CSS 创建鸥翼形状
文章推荐： javascript - 如何将进度圈限制在 60 而不是 100% 以内
文章推荐： c++ - 包含 "D3DX11Effect.h"时出现数百个错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com