javascript Jquery Dialog打开多个对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19051408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Dialog opening multiple dialogs
提问by Mark
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:
我在同一页面上有多个图像，对于每个图像，单击时，我试图打开一个对话框，我的 HTML 设置中有以下 6 个。当前，当我单击图像时，会弹出 6 个对话框，所有对话框的信息都与第一个 div 中的信息相同。如何修改我的脚本以使其正常工作：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:[email protected]">SomeEmail</a>
</p>
</div>
</div>
The JQuery:
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>
采纳答案by bhb
Because you have many .dialogdivs. Keep only one div.
因为你有很多.dialogdiv。只保留一个 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:[email protected]">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>
Check thisfiddle.
检查这个小提琴。
Update: Modify you js to this.
更新：将您的 js 修改为此。
$(".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.
}
}
});
});
Dont forget to add css
不要忘记添加css
.dialog {
display:none;
}
Cheers!!
干杯！！
