单击时关闭对话框(任何位置) [英] Close dialog on click (anywhere)
本文介绍了单击时关闭对话框(任何位置)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否有默认选项通过单击屏幕上的某处而不是关闭图标来关闭 jQuery 对话框?
Is there a default option to close a jQuery dialog by clicking somewhere on the screen instead of the close icon?
推荐答案
这是我编写的一个插件,它扩展了 jQuery UI 对话框以包含单击外部时关闭以及其他功能:https://github.com/jasonday/jQuery-UI-Dialog-extended
这里有 3 种方法可以在点击外部 popin 时关闭 jquery UI 对话框:
Here are 3 methods to close a jquery UI dialog when clicking outside popin:
如果对话框是模态的/有背景覆盖:http://jsfiddle.net/jasonday/6FGqN/
If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function() {
jQuery('.ui-widget-overlay').bind('click', function() {
jQuery('#dialog').dialog('close');
})
}
});
});
如果对话框是非模态的方法一:http://jsfiddle.net/jasonday/xpkFf/
If dialog is non-modal Method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind('click', function(e) {
if(jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
) {
jQuery('#dialog').dialog('close');
}
});
非模态对话框方法二:http://jsfiddle.net/jasonday/eccKr/
$(function() {
$('#dialog').dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose); },
focus: function() {
closedialog = 0; },
close: function() {
$(document).unbind('click'); }
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
这篇关于单击时关闭对话框(任何位置)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文