¿Cómo implementar múltiples ventanas emergentes?

1

Tengo un problema para implementar múltiples ventanas emergentes. Recibo este script de la red, es correcto cuando lo aplico a una sola ventana emergente, pero no si hago copias de esto. Lo puedes ver en: Dendrosita . En el menú de margen izquierdo (Sinopsi / Fitxa / Autors) lo implementé correctamente en uno (Sinopsi) pero ahora puedo implementarlo en otro (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();
        }
    });

});

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

¡Gracias!

1

La razón por la que no funcionó fue que para cada #go #go1 #go2enlace emergente, necesita tres controladores de eventos separados, no solo uno. Es por eso que aparecen varios cuadros emergentes cuando hace clic en uno, y ninguno cuando hace clic en los otros dos.

Para que esto funcione, volvería a escribir el script emergente para admitir múltiples ventanas emergentes. Pero simplemente puede hacer esto procedimentalmente sin usar funciones.

HTML (combine el código a continuación con el suyo. Los ID, los nombres de las clases se relacionan con 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 (asegúrese de que las ventanas emergentes estén ocultas).

.popup{display:none}

Buena suerte amigo, el sitio se ve bien por cierto. Realmente debería aprender más sobre jQuery, es bastante poderoso y realmente fácil de usar en comparación con solo JavaScript. Creo que lo disfrutarás.

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

ps No te preocupes por todas esas funciones anónimas function(){//do stuff}, es solo una abreviatura defunction bar(){//do stuff} $('.open').click(bar)

2
  • ¿Hay alguna forma de usar la clase emergente en lugar de múltiples identificadores como popup1 popup2 popup3? Mi problema es establecer múltiples identificadores en cientos de div.
    Abhils
    19 de enero de 2018 a las 5:54
  • @abhils, sí, puedes usar jquery para recorrer elementos con .popupclass y hacer lo que quieras con ellos. 29 de enero de 2018 a las 16:19