同じページのさまざまな画像のポップアップとしてさまざまな div を表示したかったのです。以下は私のコードです。脚本
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"/>
<script>
function showdialog(linkName, linkClass) {
//select all the a tag
$(linkName).click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.' + linkClass + ' .close').click(function (e) {
//Cancel the link behaviors
e.preventDefault();
$('#mask').hide();
$('.' + linkClass).hide();
});
$(window).resize(function () {
var box = $('.' + linkClass);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH / 2 - box.height() / 2);
box.css('left', winW / 2 - box.width() / 2);
});
}
</script>
スタイル
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#ffffff;
display:none;
}
.appDevClass,.productEngClass,.erpServClass,.testingClass,.portalMobClass,.legacyModClass {
position:fixed;
left:0;
top:-100px;
width:700px;
height:auto;
display:none;
z-index:9999;
padding:20px;
box-shadow: 0 0 50px 10px #006357;
border-radius: 12px;
}
#appDevLink,#productEngLink,#erpServLink,#testingLink,#portalMobLink,#legacyModLink {
width:700px;
height:auto;
padding:10px;
background-color:#ffffff;
}
</style>
HTML
<div>
<div> <img src="servicePort.png" style="position:relative;left:260px;padding-bottom:20px;"/>
</div>
<div >
<a href="#appDevLink" id="appDevLinkId" name="appDev" style="position:relative;left:370px;height:100%;"> <img onclick="javascript:showdialog('#appDevLinkId','appDevClass')" src="appDev.png" id="appDevImg"/></a>
</div>
<div>
<a href="#productEngLink" id="productEngLinkId" name="productEng" style="position:relative;left:150px; "> <img onclick="javascript:showdialog('#productEngLinkId','productEngClass')" src="productEng.png" id="productEngImg"/></a>
<a href="#erpServLink" id="erpServLinkId" name="erpServ" style="position:relative;left:370px;"> <img onclick="javascript:showdialog('#erpServLinkId','erpServClass')" src="erpServ.png" id="erpServImg"/></a>
</div>
<div>
<a href="#testingLink" id="testingLinkId" name="testing" style="position:relative;left:150px;"> <img onclick="javascript:showdialog('#testingLinkId','testingClass')" src="testing.png" id="testingImg"/></a>
<a href="#portalMobLink" id="portalMobLinkId" name="portalMob" style="position:relative;left:370px;"> <img onclick="javascript:showdialog('#portalMobLinkId','portalMobClass')" src="portalMob.png" id="portalMobImg"/></a>
</div>
<div>
<a href="#legacyModLink" id="legacyModLinkId" name="legacyMod" style="position:relative;left:370px;"> <img onclick="javascript:showdialog('#legacyModLinkId','legacyModClass')" src="legacyMod.png" id="legacyModImg"/></a>
</div>
<div>
<img src="bottomline.png" style="position:relative;left:70px;padding-top:10px;"/>
</div>
</div>
<div id="appDevLink" class="appDevClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
<div id="productEngLink" class="productEngClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
<div id="erpServLink" class="erpServClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
<div id="testingLink" class="testingClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
<div id="portalMobLink" class="portalMobClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
<div id="legacyModLink" class="legacyModClass">
<a href="#"class="close" style="float:right;background-color:black;padding:3px;color:white;"/>Close </a>
<h3>abc </h3>
<p>
some ocntent here
</p>
</div>
問題は、ポップアップと同じ div を複数回開くことです。つまり、時間の画像をクリックすると、divが1回開きます。もう一度同じ画像をクリックすると、divが2回開き、これが続きます。
このスクリプトにどのような問題があるのか わかりません。誰でもこれで私を助けることができますか？