[英]Close jQuery UI dialog on overlay click
当人们点击叠加层时,我想关闭我的模态,通常你会用
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
但是我在创建模态后正在加载模态,因此上述代码似乎以某种方式干扰了我的模态。 到目前为止,这是我的代码。
var dialog = $(".dialog").dialog({ autoOpen: false, closeText: "", width: 'auto', modal: true, position: { my: "center top", at: "center top+30", of: "body" }, show: { effect: 'fade', duration: 250, }, hide: { effect: 'fade', duration: 250 }, }); $(".currentDay").click(function () { var id = event.target.id; var url = '/Home/CalenderPartial/' + id; dialog.load(url, function () { dialog.dialog("open"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您可以将事件绑定到open
方法中
var dialog = $(".dialog").dialog({
autoOpen: false,
closeText: "",
width: 'auto',
modal: true,
open: function(event, ui) { //added here
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
});
},
position: {
my: "center top",
at: "center top+30",
of: "body"
},
show: {
effect: 'fade',
duration: 250,
},
hide: {
effect: 'fade',
duration: 250
},
});
好吧,我发现了问题。 我试图在初始化之前关闭对话框。
var dialog = $(".dialog").dialog({ autoOpen: false, closeText: "", width: 'auto', modal: true, position: { my: "center top", at: "center top+30", of: "body" }, show: { effect: 'fade', duration: 250, }, hide: { effect: 'fade', duration: 250 }, open: function () { jQuery('.ui-widget-overlay').on('click', function () { dialog.dialog('close'); }); }, }); $(".currentDay").click(function () { var id = event.target.id; var url = '/Home/CalenderPartial/' + id; dialog.load(url, function () { dialog.dialog("open"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这是我最终得到的代码,并且按预期工作。
总结一下,将这段代码放在对话框init中。
open: function() {
jQuery('.ui-widget-overlay').on('click', function() {
jQuery('#dialog').dialog('close');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.