1
ポップアップウィンドウが表示されたときに画面をぼかそうとしています。 jsfiddleの最初の2つのポップアップでは、ぼかしは完全に機能していますが、ポップアップでは同じ情報がそれぞれのポップアップで異なる情報になるはずです。ポップアップの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>
まあ。 – vinman64