[英]jQuery UI Dialog: Close when Click Outside
I have a jQuery UI Dialog. 我有一个jQuery UI对话框。 I tried implementing the "$('.ui-widget-overlay').bind('click'...." method which has been suggested to close the dialog when a user clicks outside. However, it doesn't work in my code. What am I doing wrong?
我尝试实现“ $('。ui-widget-overlay')。bind('click'....”方法,该方法建议在用户单击外部时关闭对话框。但是,该方法在我的代码我在做什么错?
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
resizable: false,
modal: true,
buttons: {
"OK": function(e) {
e.preventDefault();
$.ajax({
url: $('form.addEdit').attr('action'),
type: $('form.addEdit').attr('method'),
data: $('form.addEdit').serialize(),
open: function(){
$('.ui-widget-overlay').bind('click', function(){
$('div.deleteImageDialog').dialog('close');
})
},
success: function(html) { }
});
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
});
Then you have to bind an event to the overlay. 然后,您必须将事件绑定到叠加层。
$('input[name="delete-image"]').click(function(e){
e.preventDefault();
$("div.deleteImageDialog").dialog({
// your code...
"Cancel": function() {
$(this).dialog('close');
}
}
});
$('.overlay_sector').bind( 'click', function() {
$("div.deleteImageDialog").dialog('close');
$('.overlay_sector').unbind();
} )
});
I had a similar problem. 我有一个类似的问题。 Went with a simpler code solution based on this thread's answer:
根据此线程的答案,使用了更简单的代码解决方案:
Use jQuery to hide a DIV when the user clicks outside of it 当用户在DIV之外单击时,使用jQuery隐藏DIV
$(document).mouseup(function (e)
{
var myDialog = $("#dialog-confirm");
var container = $(".ui-dialog");
if (myDialog.dialog( "isOpen" )===true)
{
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
myDialog.dialog( "close" );
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.