帶模糊的多個彈出式對話框

我試圖在出現彈出式窗口時模糊屏幕。在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>

來源

2017-03-26 vinman64

嗯，這是沒有任何幫助。 – vinman64

你可以試試這個。如果有任何問題，請隨時詢問我。希望這會回答你的問題。

點擊源代碼下方的演示按鈕。如果你認爲這符合你的期望，不要忘記接受這個答案。

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

來源

2017-03-26 21:10:07

你真棒！很好的工作。非常感謝。 – vinman64

@ vinman64你應該接受我的回答bro –

你知道如何製作它，所以我只需要懸停在而不是點擊調出結果框？再次感謝！！ – vinman64

帶模糊的多個彈出式對話框

回答

相關問題