jquery对话框打开多个对话框 [英] Jquery Dialog opening multiple dialogs
本文介绍了jquery对话框打开多个对话框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在同一页面上有多个图像,对于每个图像,单击时,我想要打开一个对话框,我的HTML设置中有以下6个。当我单击图像时,弹出6个对话框,所有对话框都在第一个div中找到相同的信息。如何修改脚本以使其正常工作:
HTML:
I have multiple images on the same page, for each image, when clicked, I'm trying to get a dialog box to open, I have 6 of the following in my HTML set up. CUrrently when I click an image, 6 dialogs pop-up, all with the same info found in the first div. How can I modify my script to make this work properly: The HTML:
<div class="profiles">
<a class="open" href="#">
<img src="/../.jpg" / class="img-full"></a>
<div class="dialog" title="Basic modal dialog">
<p><strong>Some Text</strong></p>
<p>
<strong>Phone</strong>: *********<br />
<strong>Email</strong>: <a href="mailto:some@email.com">SomeEmail</a>
</p>
</div>
</div>
JQuery:
The JQuery:
<script type="text/javascript">
$(".dialog").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$(".open")
.click(function () {
$(".dialog").dialog("open");
});
</script>
推荐答案
因为您有许多。对话框
divs。只保留一个div。
Because you have many .dialog
divs. Keep only one div.
<div class="dialog" title="Basic modal dialog">
<p><strong>Some Text</strong>
</p>
<p> <strong>Phone</strong>: *********
<br /> <strong>Email</strong>: <a href="mailto:some@email.com">SomeEmail</a>
</p>
</div>
<div class="profiles"> <a class="open" href="#">
<img src="/../.jpg" class="img-full"></a>
</div>
<div class="profiles"> <a class="open" href="#">
<img src="/../.jpg" class="img-full"></a>
</div>
检查这个小提琴。
更新:修改您的js至此。
Update: Modify you js to this.
$(".open").click(function () {
var div = $(this).next("div.dialog");
var dia = $(div).dialog({
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "",
buttons: {
"Close": function () {
$(this).dialog("close");
$(this).dialog("destroy"); //need to remove the created html. otherwise the next click will not work.
}
}
});
});
不要忘记添加css
.dialog {
display:none;
}
干杯!!
这篇关于jquery对话框打开多个对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文