如何在同一頁面中顯示多個圖像的彈出窗口

Question

我想在同一頁面上爲不同圖像顯示不同的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打開一次。 如果再次點擊相同的圖像，然後div打開2次&這繼續。

我不知道這個腳本有什麼問題。 任何人都可以幫助我。

Answer 1

我解決了它。 剛剛在點擊功能末尾添加波紋管代碼

$(linkName).unbind('click');