jquery彈出jqModal多個對話窗口

即時通訊使用jqModal從jqModal 即時通訊使用默認設置，我的意思是我想要什麼，但事情是這讓我只有一個對話框每頁，我該如何修改JS或什麼都可以，我可以有多個對話框？jquery彈出jqModal多個對話窗口

鏈接1 - 開啓與一些信息

鏈接2新窗口 - 打開另一個信息

LINK3一個新的窗口---等

都在同一個網站上。

這是我現在有：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>

謝謝你advace。

來源

2011-05-13 Gmo

更改您的div的id是彼此不同（例如：dialog1，dialog2等）
鏈接，刪除類jqModal，並添加一個ID喜歡showDialog1，showDialog2（上第二個鏈接）等

然後添加到您的代碼：

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

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

Working sample here

資源：

來源

2011-05-13 06:51:31 ariel

工作正常，但無論如何該函數適用於所有div自動？看到我想要做的是從數據庫中生成這些數據庫，並且數量會不斷變化。 – Gmo 2011-05-13 22:30:42

你可以做例如'ver receta' – ariel 2011-05-14 01:46:40

一直有同樣的問題，終於想通了它周圍的相當簡單的方式...

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觸發點的模式窗口要打開。然後它的行爲與許多其他燈箱插件一樣。

來源

2011-09-25 17:43:48 Andyweb

我有兩個類與jqmWindow和單獨的ID。第一個div內容是直接與它在一起。第二個div內容（jsp）im通過jquery的.load加載。在我打開第二個div（jsp）模態窗口後。我在jsp中有一個按鈕，應該關閉當前的模式窗口並在模式窗口中打開第一個div（按鈕存在於jsp中，而不是在主jsp中）。

來源

2012-04-22 09:41:15 hafee

jquery彈出jqModal多個對話窗口

回答

相關問題