jQuery UI 대화 상자는 호출 할 때 닫히지 만 열리지 않습니다

Question

그래서 나는 그들이 "탭"되었을 때 내 대화 상자가 닫히지 않는 이유를 알아내는 데 어려움을 겪고 있습니다. 지금까지 나는 document, window, .ikon_picmap을 대화 상자 닫기를위한 선택자로 시도했다. 불운. 내가 뭘 놓치고 있니?

https://jsfiddle.net/089bd4kq/

자바 스크립트 :

//Document Ready 
$(document).ready(function(){ 

// So the modals are hidden to start with. 
$("#p1_box").dialog({ autoOpen: false }); 
$("#p2_box").dialog({ autoOpen: false }); 
$("#p3_box").dialog({ autoOpen: false }); 
$("#p4_box").dialog({ autoOpen: false }); 

// Modal placement relative to it's trigger. 
$('#p1_box').dialog({position: {my:'left+5% top+4%',at:'top', of:'.p1'}}); 
$('#p2_box').dialog({position: {my:'left+5% top+4%',at:'top', of:'.p2'}}); 
$('#p3_box').dialog({position: {my:'left+5% top+4%',at:'top', of:'.p3'}}); 
$('#p4_box').dialog({position: {my:'left+5% top+4%',at:'top', of:'.p4'}}); 

$('.p1').mouseenter(function(){ 
    $("#p1_box").dialog("open"); 
}); 
$('#p1_box').mouseleave(function(){ 
    $('#p1_box').dialog('close'); 
}); 
$('.p2').mouseenter(function(){ 
    $("#p2_box").dialog("open"); 
}); 
$('#p2_box').mouseleave(function(){ 
    $('#p2_box').dialog('close'); 
}); 
$('.p3').mouseenter(function(){ 
    $("#p3_box").dialog("open"); 
}); 
$('#p3_box').mouseleave(function(){ 
    $('#p3_box').dialog('close'); 
}); 
$('.p4').mouseenter(function(){ 
    $("#p4_box").dialog("open"); 
}); 
$('#p4_box').mouseleave(function(){ 
    $('#p4_box').dialog('close'); 
}); 

// Touch Commands 
$('.p1').on("tap",function(){ 
    $("#p1_box").dialog("open"); 
}); 
$('.p2').on("tap",function(){ 
    $("#p2_box").dialog("open"); 
}); 
$('.p3').on("tap",function(){ 
    $("#p3_box").dialog("open"); 
}); 
$('.p4').on("tap",function(){ 
    $("#p4_box").dialog("open"); 
}); 


}); // End Document Ready 

//On window resize (for correct modal trigger placement) - a responsive feature. 
$(window).on('resize', function(){ 

$('#p1_box,#p2_box,#p3_box,#p4_box').dialog('close'); 

}); //End window resize 

CSS

.p1 { 
left:53%; 
top:40%; 
color: #0FA0CE; 
} 
.p2 { 
left: 63%; 
top: 21%; 
color: #0FA0CE; 
} 
.p3 { 
left:52%; 
top:14%; 
color: #0FA0CE; 
} 
.p4 { 
left:18%; 
top:65%; 
color: #0FA0CE; 
} 
/* Picmap position markers END */ 

/* Global Non-Responsive Styles */ 
html { 
width:100%; 
height: 100%; 
} 
/* Don't show the "x" on the diag box */ 
.ui-dialog-titlebar-close { 
visibility: hidden; 
} 
.ikon_picmap { 
background-color: #bbbbbb; 
position: relative; 
display: block; 

} 
.ikon_picmap img { 
width: 100%; 
height: auto; 
/*position: absolute;*/ 
} 
.ik_p { 
cursor: pointer; 
height: 10px; 
width: 10px; 
position: absolute; 
font-size: 1em; 
} 

이에 어떤 도움이 놀라운 것입니다!

Answer 1

봅니다위한 dialog 여러 번 호출하지 않는

<div id="p1_box" class="p_box" title="Nose"> 
    <p>This is where the dog breaths from.. pretty neat.</p> 
</div> 
<div id="p2_box" class="p_box" title="Left Ear"> 
    <p>This is one of the wonderful ears used by this puppy to listen to things.</p> 
</div> 
<div id="p3_box" class="p_box" title="Right Ear"> 
    <p>Make sure he doesn't hear you out of this ear..</p> 
</div> 
<div id="p4_box" class="p_box" title="Toy"> 
    <p>A much needed thing for a puppy. Probably shouldn't have a puppy without a toy.</p> 
</div> 

SCRIPT

$('.ui-dialog').mouseleave(function(){ 
    $(this).find('.p_box') 
      .dialog('close'); // here p_box is elemnt for which dialog opens 
}); 

에게 대신

HTML과 같은 각 대화의 .ui-dialog에 한 가지 더 mouseleave을 적용합니다 각 속성 호출 i t는 한 번만

$('#p1_box').dialog({ 
    autoOpen: false, 
    position: {my:'left+5% top+4%',at:'top', of:'.p1'} 
}); 

JsFiddle