Jquery Dialog Opening Multiple Dialogs

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 a

Solution 1:

Because you have many .dialog divs. Keep only one div.

<divclass="dialog"title="Basic modal dialog"><p><strong>Some Text</strong></p><p><strong>Phone</strong>: *********
        <br /><strong>Email</strong>: <ahref="mailto:some@email.com">SomeEmail</a></p></div><divclass="profiles"><aclass="open"href="#"><imgsrc="/../.jpg"class="img-full"></a></div><divclass="profiles"><aclass="open"href="#"><imgsrc="/../.jpg"class="img-full"></a></div>

Check this fiddle.

---

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.
            }
        }
    });
});

Dont forget to add css

.dialog {
  display:none;
}

Fiddle

Cheers!!