Tengo un problema a la implementación de múltiples ventanas emergentes. Tengo este script de red, es correcto cuando puedo aplicar a un único popup pero no se si tengo que hacer copias de este. Se puede ver en: Dendrosite. En la margen izquierda del menú (Sinopsi/Fitxa/Autores) he implementado correcly en uno (Sinopsi) pero ahora puedo aplicar a otros (Fitxa/Autores)

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; 

//carga popup con jQuery magia! 
función loadPopup(){ 
//carga emergente sólo si está deshabilitada 
si(popupStatus==0){ 
$("#backgroundPopup").css({ 
"opacidad": "0.7" 
}); 
$("#backgroundPopup").fadeIn("fast"); 
$("#popupContact").fadeIn("fast"); 
popupStatus = 1; 
} 
} 

//desactivación de popup con jQuery magia! 
función disablePopup(){ 
//desactiva la ventana emergente sólo si está habilitada 
si(popupStatus==1){ 
$("#backgroundPopup").fadeOut("fast"); 
$("#popupContact").fadeOut("fast"); 
popupStatus = 0; 
} 
} 



//El CONTROL de EVENTOS EN jQuery 
$(document).ready(function(){ 

//CARGA EMERGENTE 
//Haga clic en el botón de evento! 
$("#ir").click(function(){ 
//centrado con css 
//carga emergente 
loadPopup(); 
}); 

//CERRAR POPUP 
//Haga clic en la x de eventos! 
$("#popupContactClose").click(function(){ 
disablePopup(); 
}); 
//Haga clic en un evento! 
$("#backgroundPopup").click(function(){ 
disablePopup(); 
}); 
//Presione Escape evento! 
$(document).keypress(function(e){ 
si(e.keyCode==27 && popupStatus==1){ 
disablePopup(); 
} 
}); 

}); 

y CSS:

#backgroundPopup{ 
display:none; 
position:fixed; 
_position:absolute; /* hack para internet explorer 6*/
altura:100%; 
width:100%; 
top:0; 
left:0; 
z-index:1; 
} 
#popupContact{ 
margin-top: -104px; 
margin-left:102px; 
display:none; 
position:fixed; 
_position:absolute; /* hack para internet explorer 6*/
altura:288px; 
width:600px; 
z-index:9; 
relleno:12 px; 
background-color: #333; 
filter: alpha(opacity=20); opacidad: .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: 12 px; 
color: #FFF; 
text-align: justificar; 
} 

#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!

InformationsquelleAutor aleish76 | 2011-03-17

1 Comentario

  1. 1

    La razón por la que no funcionó fue que por cada #go #go1 #go2 emergente enlaces, usted necesita los tres controladores de eventos independientes, no sólo uno. Es por eso que varios cuadros de pop-ups cuando haga clic en uno, y ninguno de pop-ups cuando usted haga clic en los otros dos.

    Para conseguir que esto funcione, me gustaría reescribir en la ventana de script para el soporte de múltiples ventanas emergentes. Pero se puede hacer este procedimiento sin la utilización de funciones.

    HTML (Combinar el código de abajo con la suya. Los Identificadores, nombres de clases se relacionan con el 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 de carga oculta).

    .popup{display:none}

    Buena suerte compañero, el sitio se ve bien por cierto. Usted debe aprender más acerca de jQuery, es bastante potente y muy fácil de utilizar en comparación con apenas el JavaScript. Me gustaría pensar que la vas a disfrutar.

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

    p.s. No preocupado acerca de todas las funciones anónimas function(){//do stuff}, es sólo una abreviatura de function bar(){//do stuff} $('.open').click(bar)

    • Es allí cualquier manera de utilizar la emergente clase en lugar de múltiples ids como popup1 popup2 popup3 ? Mi problema es el conjunto de varios identificadores en cientos de div .
    • sí, usted puede usar jquery bucle a través de los elementos con .popup clase y hacer lo que quiera con ellos.

Dejar respuesta

Please enter your comment!
Please enter your name here