因此,我很难弄清楚为什么我的对话框无法关闭,当我将它们“挖掘”出来时。到目前为止,我已经将文档,窗口,.ikon_picmap作为对话框关闭的选择器。没有运气。我错过了什么?jQuery UI对话框在调用时不会关闭,但会打开
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;
}
任何帮助将是惊人的!
你可以为它的在线演示?或者向我们展示一个对话框的html。 –
这里是一个小提琴链接: https://jsfiddle.net/089bd4kq/ –