jquery对话框打开多个对话框 [英] Jquery Dialog opening multiple dialogs

问题描述

我在同一页面上有多个图像，对于每个图像，单击时，我想要打开一个对话框，我的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:[e-mail]">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:[e-mail]">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屋！