Question

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?

链接1 - 打开新窗口,一些信息

链接2 - 打开与另一个信息库的新窗口

页: 1

所有这些都在同一网站上。

这是现在的: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>

c :

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

和联合材料:

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

thank you in advace.

Answer 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

资源:

Answer 2

我有两块 d子,有小 class和单.。第一部分内容是直截了当的。第2部分(jsp)内容通过舱载荷装载。 i 打开了模式窗口中的第二版(jsp)。 i th有一顿,应当关闭目前的模式窗口,并在模式窗口中开放一滴(但是,在jsp而不是主要支架中存在)。

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

因此,大家需要做的是,关于你联系的触发因素的识别资料,显示你希望打开的模型窗口。然后,它实际上只是像许多其他灯塔一样行事。

友情链接