Jquery 대화 상자가 여러 대화 상자 열기

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 만 유지하십시오.

<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 바이올린을 확인하십시오.

---

업데이트 :이 문제를 해결하십시오.

$(".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

건배를 추가하는 것을 잊지!