Блог

Поэтому мне трудно понять, почему мои диалоговые окна не закрываются, когда я их «вынимаю». До сих пор я пробовал document , window, .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;
}
  

Любая помощь по этому вопросу была бы потрясающей!

Попробуйте применить 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 несколько раз для каждого свойства, вызывайте его только один раз, например,

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

JsFiddle