jquery popup jqModal multiple dialog windows

问题

im using jqModal from jqModal im using the defaults setting, i mean that what i want, but the thing is this allow me to have only one dialog per page, how can i modify the js or anything so I can have multiple dialogs?

link1 --- opens a new windows with some info

link2 -- opens a new windows with another info

link3 --- and so on

all in the same website.

this is what i have now: 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');
}

and the JS:

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

thank you in advace.

回答1:

Change the id of your divs to be different from each other (for example: dialog1, dialog2, etc)
On the link, remove the class jqModal and add an id like showDialog1, showDialog2 (on the second link), etc.

Then add this to your code:

$(function() {
    $('.jqmWindow').jqm(); // will init everything with class jqmWindow

    $('#showDialog1').click(function() { $('#dialog1').jqmShow(); });
    $('#showDialog2').click(function() { $('#dialog2').jqmShow(); });
    .
    .
    .
})

Working sample here

Resources:

jQuery documentation
jqModal documentation

回答2:

I have two divs with class jqmWindow and separate id. The first div content is straight forward with in it. the second div content(jsp) im loading through .load of jquery. after i open the second div(jsp) in modal window. i have a button in th jsp that should close the current modal window and open first div in the modal window(button exists in the jsp not in the main jsp).

回答3:

Been having the same issue and finally figured out a fairly simple way around it...

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

So all you need to do is specify an ID on your link triggers that points to the modal window you want to open. Then it's really just acting the same as many other lightbox plugins.

来源：https://stackoverflow.com/questions/5986553/jquery-popup-jqmodal-multiple-dialog-windows

标签

javascript

jquery

modal-dialog

jqmodal