我在同一页面上有多个图像,对于每个图像,单击时,我正在尝试打开一个对话框,我的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:some@email.com">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>
答案 0 :(得分:1)
因为你有很多.dialog
个div。只保留一个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>
检查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.
}
}
});
});
别忘了添加css
.dialog {
display:none;
}
干杯!!