我试图在弹出窗口出现时模糊屏幕。在 jsfiddle 的前 2 个弹出窗口中，模糊效果很好，但两个弹出窗口中出现相同的信息，而每个弹出窗口中应该有不同的信息。 在第二组弹出窗口中，每个弹出窗口中的信息是正确的，但它没有我想要的模糊。 我试图组合 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>
你可以
试试这个。如果有任何问题，请随时问我。希望这会回答你的问题。
单击源代码下方的演示按钮。如果您认为这符合您的期望，请不要忘记接受这个答案。
.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>