多個帶有模糊的彈出窗口
[英]Multiple pop-ups with blur
問題描述
當彈出窗口出現時，我試圖模糊屏幕。 在jsfiddle的前2個彈出窗口中，模糊效果非常好，但在彈出窗口中出現相同的信息時，每個彈出窗口中的信息應該是不同的。 在第二組彈出窗口中，每個彈出窗口中的信息都是正確的，但它沒有我想要的模糊。 我試圖結合兩組代碼來實現我想要的但沒有運氣。 有人可以幫助編寫代碼，以便在兩個彈出窗口中同時獲得模糊和正確的信息。 謝謝，
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>
1 個解決方案
解決方案1
0 已采納 2017-03-26 21:10:07
你可以嘗試這個。 如果有任何問題，請隨時問我。 希望這能回答你的問題。
單擊源代碼下方的演示按鈕。 如果你認為這符合你的期望，別忘了接受這個作為答案。
.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>
多個模態彈出窗口以顯示不同的圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.