我在同一页面上有多个图像，对于每个图像，单击时，我试图打开一个对话框，我在 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] /cdn-cgi/l/email-protection">SomeEmail</a>
</p>
</div>
</div>
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>
因为你有很多.dialog分区。只保留一个 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] /cdn-cgi/l/email-protection">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 this http://jsfiddle.net/f2D9m/ fiddle.
更新：将你的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.
}
}
});
});
不要忘记添加 css
.dialog {
display:none;
}
Fiddle http://jsfiddle.net/f2D9m/3/
Cheers!!
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
