如何實現多個彈出窗口？

Question

我要實現多個彈出窗口的問題。我從網上獲得這個腳本，當我申請一個彈出窗口時是正確的，但如果我做了這個副本，這是正確的。你可以看到它：Dendrosite。在距左菜單（Sinopsi/Fitxa/Autors）我在一個（Sinopsi）實施正確地將，但現在我可以實現與其他（Fitxa/Autors）

HTML：

<li class="sinopsi"><a id="go"><span></span></a></li> 
     <div id="popupContact"> 
    <a id="popupContactClose"></a> 
    <h1></h1> 
    <h3> 
     <br/><br/> 
    </h3> 
</div> 
<div id="backgroundPopup"></div> 

的Javascript：

 
var popupStatus = 0; 

//loading popup with jQuery magic! 
function loadPopup(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("fast"); 
     $("#popupContact").fadeIn("fast"); 
     popupStatus = 1; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("fast"); 
     $("#popupContact").fadeOut("fast"); 
     popupStatus = 0; 
    } 
} 



//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 

    //LOADING POPUP 
    //Click the button event! 
    $("#go").click(function(){ 
     //centering with css 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $("#popupContactClose").click(function(){ 
     disablePopup(); 
    }); 
    //Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
    }); 
    //Press Escape event! 
    $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup(); 
     } 
    }); 

}); 

和CSS：

 
#backgroundPopup{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
height:100%; 
width:100%; 
top:0; 
left:0; 
z-index:1; 
} 
#popupContact{ 
    margin-top: -104px; 
    margin-left:102px; 
    display:none; 
    position:fixed; 
    _position:absolute; /* hack for internet explorer 6*/ 
    height:288px; 
    width:600px; 
    z-index:9; 
    padding:12px; 
    background-color: #333; 
    filter: alpha(opacity=20); opacity: .5 
} 
#popupContact h1{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:20px; 
    color:#FFF; 
    text-shadow: 0px 1px 1px #000; 
    padding-bottom:10px; 
    margin-bottom:30px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
} 

#popupContact h3{ 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FFF; 
    text-align: justify; 
} 

#popupContactClose{ 
    font-size:18px; 
    line-height:14px; 
    right:6px; 
    top:4px; 
    position:absolute; 
    color: #ffeb70; 
    font-weight:700; 
    display:block; 
    cursor: pointer; 
    font-family: Arial, Helvetica, sans-serif; 
} 

謝謝！

Answer 1

它不工作了，對於每一個#go #go1 #go2彈出鏈接，您需要三個獨立的事件處理程序，不只是一個原因。這就是爲什麼多個盒子彈出窗口，當你點擊一個，當你點擊其他兩個沒有任何彈出窗口。

爲了讓這個工作，我會重寫彈出腳本來支持多彈出窗口。但是你可以簡單地在沒有使用函數的情況下執行此操作。

HTML（合併下面的代碼與你的。這些ID，類名涉及到的JavaScript）

<li id='sinopsi' class='openlink'>Sinopsi 
    <div class='popup' id='popup1'>Popup 1<span class='closex'>x</span></div> 
</li> 

<li id='fitxa' class='openlink'>Fitxa 
    <div class='popup' id='popup2'>Popup 2<span class='closex'>x</span></div> 
</li> 

<li id='autors' class='openlink'>Autors 
    <div class='popup' id='popup3'>Popup 2<span class='closex'>x</span></div> 
</li> 

的JavaScript

<script> 
$(function(){ 

$('#sinopsi').click(function(){ // Activates the popups 
    $('#popup1').fadeIn('fast') 
}); 

$('#fitxa').click(function(){ 
    $('#popup2').fadeIn('fast') 
}); 

$('#sinopsi').click(function(){ 
    $('#popup3').fadeIn('fast') 
}); 

/* //Note that if your HTML is properly nested you could easily have this command execute your popups instead of the three above 

$('.openlink').click(function(){ 
    $(this) 
    .find('.popup') // finds your nested popup div 
    .fadeIn('fast') 
    ; 
}); 

*/ 

$('.closex').click(function(){ // closes the popup, when X is clicked 
    $('.popup').fadeOut('fast'); 
}); 

$('.popup').keypress(function(e){ // close popup via ESC key. 
    if(e.keyCode==27){ 
    $(this).fadeOut('fast'); 
    } 
}); 

$('.popup').css({opacity: "0.7"}); // copies over the transparency 

}); 
</script> 

CSS（確保彈出窗口加載隱藏。）

.popup{display:none} 

祝你好運隊友，該網站看起來很不錯BTW。您應該真的瞭解更多關於jQuery的知識，與JavaScript相比，它非常強大並且非常易於使用。我想你會喜歡它的。

http://jquery.com/ http://api.jquery.com/click/

附：不要擔心所有那些匿名函數function(){//do stuff}，它只是一個簡寫function bar(){//do stuff} $('.open').click(bar)