jquery popup jqModal più windows di dialogo

im utilizzando jqModal da jqModal im utilizzando le impostazioni predefinite, voglio dire che quello che voglio, ma la cosa è questo mi permette di avere solo una window di dialogo per pagina, come posso modificare il js o qualsiasi cosa in modo da poter avere più dialoghi?

link1 — apre nuove windows con alcune informazioni

link2 – apre nuove windows con un'altra informazione

link3 — e così via

tutti nello stesso sito web.

questo è quello che ho adesso: html:

<div id="containers_verReceta"> <div id="recetas_img"> imagen </div> <div id="recetas_verMas"> <p class="recetas_titulo">Pollo a la Mostaza</p> <p class="recetasRes"> Quitar a las pechugas de sus partes blancas y cortarlas en dados como de 1 o 2 cm, salpimentándolas a continuación. Echar el aceite en una cazuela y rehogar el pollo durante unos... <a href="#" class="jqModal">ver receta</a> </p> </div> <div id="lineapunteada"></div> </div> <div id="containers_verReceta"> <div id="recetas_img"> imagen </div> <div id="recetas_verMas"> <p class="recetas_titulo">Pollo a la Mostaza2</p> <p class="recetasRes"> Quitar a las pechugas de sus partes blancas y cortarlas en dados como de 1 o 2 cm, salpimentándolas a continuación. Echar el aceite en una cazuela y rehogar el pollo durante unos... <a href="#" class="jqModal">ver receta2</a> </p> </div> <div id="lineapunteada"></div> </div> <div class="jqmWindow" id="dialog"> <a href="#" class="jqmClose">Close</a> hello world </div> <div class="jqmWindow" id="dialog"> ///this is suppous to be the other dialog for the second link <a href="#" class="jqmClose">Close</a> hello world2 </div> 

css:

 .jqmWindow { display: none; position: fixed; top: 17%; left: 50%; margin-left: -300px; width: 600px; background-color: #EEE; color: #333; border: 1px solid black; padding: 12px; } .jqmOverlay { background-color: #000; } /* Fixed posistioning emulation for IE6 Star selector used to hide definition from browsers other than IE6 For valid CSS, use a conditional include instead */ * html .jqmWindow { position: absolute; top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px'); } 

e il JS:

 <script type="text/javascript"> $().ready(function() { $('#dialog').jqm(); }); </script> 

grazie in advace.

  1. Cambi l' id dei tuoi div per essere diversi tra loro (ad esempio: dialog1 , dialog2 , ecc)
  2. Nel link, rimuovere la class jqModal e aggiungere un id come showDialog1 , showDialog2 (nel secondo link) ecc.

Aggiungilo al tuo codice:

 $(function() { $('.jqmWindow').jqm(); // will init everything with class jqmWindow $('#showDialog1').click(function() { $('#dialog1').jqmShow(); }); $('#showDialog2').click(function() { $('#dialog2').jqmShow(); }); . . . }) 
  • Campione di lavoro qui

risorse:

  • jQuery documentazione
  • jqModal documentazione

Ho due div con class jqmWindow e id separati. Il primo contenuto div è diretto in avanti. il secondo contenuto di div (jsp) im caricando attraverso .load di jquery. dopo aver aperto il secondo div (jsp) nella window modale. ho un button nel jsp che dovrebbe chiudere la window modale corrente e aprire il primo div nella window modale (il button esiste nel jsp non nel jsp principale).

Aveva la stessa questione e finalmente capì un modo piuttosto semplice …

HTML:

 <a href="#modalID_1" class="jqModal">link 1</a> <a href="#modalID_2" class="jqModal">link 2</a> <div class="jqmWindow" id="modalID_1"> modal content </div> <div class="jqmWindow" id="modalID_2"> modal content </div> 

JS:

 $('a.jqModal').click(function(){ $( $(this).attr('href') ) .jqm({ modal:false, overlay:80 }) .jqmShow(); return false; }); 

Quindi tutto quello che devi fare è specificare un ID sul trigger trigger che indica la window modale che si desidera aprire. Allora è solo agire come molti altri plug-in di lightbox.