在docs我没有看到这样的信息。jQuery UI对话框:如何在外部点击时关闭对话框?
在这种情况下可以选择关闭对话框:
1)push Esc;
2)单击对话框中的“确定”或“关闭”按钮。
但如何在外部点击时关闭对话框?
谢谢!
在docs我没有看到这样的信息。jQuery UI对话框:如何在外部点击时关闭对话框?
在这种情况下可以选择关闭对话框:
1)push Esc;
2)单击对话框中的“确定”或“关闭”按钮。
但如何在外部点击时关闭对话框?
谢谢!
下面是用于非模态对话框2级其他的解决方案:
如果对话框是无模式方法1: 方法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');
}
}
);
非模态对话方法2: 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;
}
});
我发现溶液上ryanjeffords.com:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$('.ui-widget-overlay').live("click",function(){
$("#dialog").dialog("close");
});
});
</script>
如果对话框不是模态的,则不起作用。 –
太糟糕了...我会尝试寻找其他解决方案 –
面对同样的问题,我创建了一个小插件,可以在单击外部时关闭对话框,无论是模态还是非模态对话框。它支持在同一页面上的一个或多个对话框。
在这里我的网站的更多信息:http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
该插件也是在GitHub上:https://github.com/coheractio/jQuery-UI-Dialog-ClickOutside
洛朗
这是我的解决方案。
我有,例如
<div id="dialog1">Some content in here</div>
<div id="dialog2">Different content in here</div>
<div id="dialog3">And so on...</div>
每个div都被开辟为这取决于用户与之交互的对话框。所以能够关闭当前活动的那个,我这样做。
// This closes the dialog when the user clicks outside of it.
$("body").on('click', '.ui-widget-overlay', function() {
if($("div.ui-dialog").is(":visible"))
{
var openDialogId = $(".ui-dialog").find(".ui-dialog-content:visible").attr("id");
if ($("#"+openDialogId).dialog("isOpen"))
{
$("#"+openDialogId).dialog('close');
}
}
});
如果对话框是模式的,然后贴上这3行代码在open
功能,当您创建您的对话框选项:
open: function(event,ui) {
$('.ui-widget-overlay').bind('click', function(event,ui) {
$('#myModal').dialog('close');
});
}
是对话框模式? –
就可用性而言,在我看来,如果对话框不是模态的,当您点击外部时,关闭对话框会出现一种奇怪的行为。无论如何,这是[解决方案](http://stackoverflow.com/questions/8302114/jquery-1-4-2-jquery-ui-dialog-close-when-outside-click-not-modal)。 –
可能[this] [1]或[this] [2]会帮助你。 [1]:http://stackoverflow.com/questions/8302114/jquery-1-4-2-jquery-ui-dialog-close-when-outside-click-not-modal [ 2]:http:// stackoverflow。com/questions/7919229/click-outside-non-modal-dialog-to-close – Bart