Как реализовать несколько всплывающих окон?

Question

У меня проблема с внедрением нескольких всплывающих окон. Я получаю этот скрипт из сети, это правильно, когда я применяю к одному всплывающему окну, но не если я делаю копии этого. Вы можете увидеть это в: Дендрозит . В левом меню на полях (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 (Объедините код ниже с вашим. Идентификаторы, имена классов относятся к 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}

Удачи, приятель, сайт выглядит хорошо, кстати. Вы должны действительно узнать больше о jQuery, он довольно мощный и действительно простой в использовании по сравнению с просто JavaScript. Я думаю, вам понравится.

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

p.s. Не беспокойтесь обо всех этих анонимных функциях function(){//do stuff}, это просто сокращение function bar(){//do stuff} $('.open').click(bar)