jQuery弹出jqModal多个对话框窗口

jQuery弹出jqModal多个对话框窗口

问题描述:

使用来自 jqModal 的jqModal 我使用的是默认设置,我的意思是我想要的,但这是允许我每页只有一个对话框,我该如何修改js或其他任何内容,以便可以有多个对话框?

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 ---打开一个包含一些信息的新窗口

link1 --- opens a new windows with some info

link2-使用其他信息打开一个新窗口

link2 -- opens a new windows with another info

link3 ---等等

link3 --- and so on

全部在同一网站上.

这就是我现在拥有的:html:

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

和JS:

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

感谢您的疏散.

  1. 将div的id更改为彼此不同(例如:dialog1dialog2等)
  2. 在链接上,删除类jqModal,并添加一个ID,例如showDialog1showDialog2(在第二个链接上),等等.
  1. Change the id of your divs to be different from each other (for example: dialog1, dialog2, etc)
  2. 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(); });
    .
    .
    .
})