Comment mettre en œuvre plusieurs des popups?

J'ai un problème pour mettre en œuvre de multiples fenêtres pop-up. Je reçois ce script à partir du net, c'est correct quand je l'applique à une seule fenêtre mais pas si je fais des copies de ce. Vous pouvez le voir dans: Dendrosite. Dans la marge de gauche (Sinopsi/Fitxa/Auteurs) j'ai mis en place correcly dans un (Sinopsi) mais maintenant, je peux mettre en place pour d'autres (Fitxa/Auteurs)

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; 

//chargement de popup avec jQuery magie! 
fonction loadPopup(){ 
//charge popup seulement si il est désactivé 
si(popupStatus==0){ 
$("#backgroundPopup").css({ 
"l'opacité": "0.7" 
}); 
$("#backgroundPopup").fadeIn("fast"); 
$("#popupContact").fadeIn("fast"); 
popupStatus = 1; 
} 
} 

//désactivation de la popup avec jQuery magie! 
fonction disablePopup(){ 
//désactive le popup seulement si elle est activée 
si(popupStatus==1){ 
$("#backgroundPopup").fadeOut("fast"); 
$("#popupContact").fadeOut("fast"); 
popupStatus = 0; 
} 
} 



//Le CONTRÔLE des ÉVÉNEMENTS DANS jQuery 
$(document).ready(function(){ 

//CHARGEMENT DU POPUP 
//Cliquez sur le bouton de l'événement! 
$("#go").cliquez sur(function(){ 
//centrage avec css 
//charger une popup 
loadPopup(); 
}); 

//FERMETURE DE LA POPUP 
//Cliquez sur le x de l'événement! 
$("#popupContactClose").cliquez sur(function(){ 
disablePopup(); 
}); 
//Cliquez sur l'événement! 
$("#backgroundPopup").cliquez sur(function(){ 
disablePopup(); 
}); 
//Appuyez sur la touche echap de l'événement! 
$(document).keypress(function(e){ 
si(e.keyCode==27 && popupStatus==1){ 
disablePopup(); 
} 
}); 

});

et CSS:

#backgroundPopup{ 
display:none; 
position:fixed; 
_position:absolute; /* hack pour internet explorer 6*/
hauteur:100%; 
width:100%; 
top:0; 
left:0; 
z-index:1; 
} 
#popupContact{ 
margin-top: -104px; 
margin-left:102px; 
display:none; 
position:fixed; 
_position:absolute; /* hack pour internet explorer 6*/
hauteur:288px; 
width:600px; 
z-index:9; 
padding:12px; 
background-color: #333; 
filter: alpha(opacity=20); opacité: .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: justifier; 
} 

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

Merci!

InformationsquelleAutor aleish76 | 2011-03-17
  1. 1

    La raison pour laquelle il n'a pas de travail, c'est que pour chaque #go #go1 #go2 popup liens, vous avez besoin de trois gestionnaires d'événements, pas seulement un. C'est pourquoi de multiples boîtes de pop-ups lorsque vous cliquez sur l'un, et aucun pop-ups lorsque vous cliquez sur les deux autres.

    Pour obtenir que cela fonctionne je voudrais réécrire le script popup pour prendre en charge plusieurs fenêtres pop-up. Mais vous pouvez tout simplement le faire sur le plan procédural, sans l'aide de fonctions.

    HTML (Fusionner le code ci-dessous avec la vôtre. L'IDs, les noms de Classe se rapportent à l'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 (assurez-vous que les fenêtres pop-up chargé caché.)

    .popup{display:none}

    Bonne chance mate, le site semble bon btw. Vous devriez vraiment en savoir plus à propos de jQuery, il est assez puissant et très facile à utiliser par rapport à JavaScript. Je pense que vous allez l'apprécier.

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

    p.s. N'obtenez pas inquiet au sujet de toutes ces fonctions anonymes function(){//do stuff}, c'est juste une abréviation de function bar(){//do stuff} $('.open').click(bar)

    • Est-il possible d'utiliser popup classe au lieu de plusieurs ids, comme popup1 popup2 popup3 ? Mon problème est de mettre plusieurs id dans une centaine de div .
    • oui vous pouvez utiliser jquery pour loop thru éléments avec .popup classe et de faire ce que vous voulez pour eux.
    InformationsquelleAutor Quang Van