I'm struggling to understand why my dialog boxes are not closing when I tap outside of them. I've tried using different selectors such as document, window, .ikon_picmap, but nothing seems to be working. What am I missing here?
Here is the JavaScript code:
//Document Ready
$(document).ready(function(){
// Hiding the modals initially
$( "#p1_box" ).dialog({ autoOpen: false });
$( "#p2_box" ).dialog({ autoOpen: false });
$( "#p3_box" ).dialog({ autoOpen: false });
$( "#p4_box" ).dialog({ autoOpen: false });
// Positioning the modals relative to their triggers
$('#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
And here is the CSS code:
.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;
}
Any assistance on this issue would be greatly appreciated!