0

我使用 jqModal 中的jqModal 我使用默认设置，我的意思是我想要的，但问题是这允许我每页只有一个对话框，我如何修改 js 或任何东西以便我可以有多个对话框？

link1 --- 打开一个包含一些信息的新窗口

link2 -- 打开一个带有其他信息的新窗口

链接3 --- 以此类推

都在同一个网站上。

这就是我现在拥有的：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>

提前谢谢你。

4

3 回答 3

7
  1. 将您的 div 更改id为彼此不同（例如：dialog1、、dialog2等）
  2. 在链接上，删除类jqModal并添加一个 id showDialog1，showDialog2（在第二个链接上）等。

然后将其添加到您的代码中：

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

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

资源：

于 2011-05-13T06:51:31.607 回答
1

我有两个带有 jqmWindow 类和单独 id 的 div。第一个 div 内容是直截了当的。第二个 div 内容（jsp）我通过 jquery 的 .load 加载。在我在模式窗口中打开第二个 div(jsp) 之后。我在 th jsp 中有一个按钮，它应该关闭当前模式窗口并在模式窗口中打开第一个 div（按钮存在于 jsp 中而不是主 jsp 中）。

于 2012-04-22T09:41:15.707 回答
0

遇到同样的问题，终于想出了一个相当简单的方法来解决它......

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

因此，您需要做的就是在链接触发器上指定一个 ID，该 ID 指向您要打开的模式窗口。然后它实际上与许多其他灯箱插件一样。

于 2011-09-25T17:43:48.553 回答