[英]jquery popup jqModal multiple dialog windows
我使用默認設置從jqModal直接使用jqModal,我的意思是我想要的,但是問題是這使我每頁只能有一個對話框,我該如何修改js或其他任何東西,以便可以有多個對話框?
link1 ---打開一個帶有一些信息的新窗口
link2-用另一個信息打開一個新窗口
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>
謝謝你。
id
你的div是彼此不同(例如: 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(); });
.
.
.
})
資源:
我有兩個div類jqmWindow和單獨的ID。 第一個div內容直接包含在其中。 第二個div content(jsp)im通過jquery的.load加載。 在模態窗口中打開第二個div(jsp)之后。 我在jsp中有一個按鈕,該按鈕應關閉當前模式窗口並在模式窗口中打開first div(該按鈕存在於jsp中而不在主jsp中)。
遇到了同樣的問題,最后想出了一個解決問題的簡單方法。
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指向您要打開的模式窗口。 然后,它實際上的作用與許多其他燈箱插件相同。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.