Диалог jQuery UI не закрывается при нажатии при вызове, но откроется

Question

Так что мне трудно понять, почему мои диалоговые окна не закрываются, когда меня «вытаскивают» из. До сих пор я пробовал документ, окно, .ikon_picmap в качестве селекторов для закрытия диалогового окна. Не повезло. Что мне не хватает?

https://jsfiddle.net/089bd4kq/

Javascript:

//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

Попробуйте применить mouseleave на .ui-dialog вместо каждого диалога, как

HTML

<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> 

скриптом

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

Еще одна вещь, не называйте dialog несколько раз для каждый вызов свойства i т только один раз нравится,

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

JsFiddle