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

尝试在 .ui-dialog 上应用 mouseleave 而不是像每个对话框一样

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，只调用一次，

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

JsFiddle