How to implement multiple popups?

Question

I have a problem to implement multiple popups. I get this script from net, it's correct when I apply to a single popup but not if i do copies of this. You can see it in: Dendrosite. In the margin left menu (Sinopsi/Fitxa/Autors) i implemented correcly in one (Sinopsi) but now I can implement to other (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();
        }
    });

});

and 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;
}

Thanks!

Quang Van Quang Van · Accepted Answer · 2011-03-21T08:06:12

The reason it didn't work was that for every #go #go1 #go2 popup links, you need three separate event handlers, not just one. That's why multiple boxes pop-ups when you click on one, and none pop-ups when you click on the other two.

To get this to work I would rewrite the popup script to support multiple popups. But you can simply do this procedurally without using functions.

HTML (Merge the code below with yours. The IDs, Class names relate to the 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 (make sure the popups loaded hidden.)

.popup{display:none}

Good luck mate, the site looks good btw. You should really learn more about jQuery, it's pretty powerful and really easy to use compared to just JavaScript. I'd think you'll enjoy it.

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

p.s. Don't get to worried about all those anonymous functions function(){//do stuff}, it's just a shorthand of function bar(){//do stuff} $('.open').click(bar)

How to implement multiple popups?

1 Answers