javascript - 複数のダイアログを開くJqueryダイアログ

Question

同じページに複数の画像があり、各画像をクリックすると、ダイアログ ボックスを開こうとしています。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>