JQuery Dialog открывает несколько диалоговых окон

Question

У меня есть несколько изображений на одной странице, для каждого изображения, при нажатии, я пытаюсь открыть диалоговое окно, у меня есть 6 из следующих в моем HTML-настройке. CUrrently, когда я нажимаю изображение, появляется 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> 

Answer 1

Потому что у вас есть много .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: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; 
} 

Fiddle

Ура !!