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>
感谢您的疏散.
答
- 将div的
id
更改为彼此不同(例如:dialog1
,dialog2
等) - 在链接上,删除类
jqModal
,并添加一个ID,例如showDialog1
,showDialog2
(在第二个链接上),等等.
- 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 likeshowDialog1
,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(); });
.
.
.
})