jQuery UI – closures对话框当单击外部
我有一个jQuery UI对话框，当特定的元素被点击时显示。 如果点击发生在触发元素或对话框本身以外的任何地方，我想closures对话框。
以下是打开对话框的代码：
$(document).ready(function() { var $field_hint = $('<div></div>') .dialog({ autoOpen: false, minHeight: 50, resizable: false, width: 375 }); $('.hint').click(function() { var $hint = $(this); $field_hint.html($hint.html()); $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]); $field_hint.dialog('option', 'title', $hint.siblings('label').html()); $field_hint.dialog('open'); }); /*$(document).click(function() { $field_hint.dialog('close'); });*/ }); 如果我取消注释最后一部分，对话框永远不会打开。 我认为这是因为打开对话框的同样的点击是再次closures它。
最后工作代码
注意：这是使用jQuery外部事件插件
$(document).ready(function() { // dialog element to .hint var $field_hint = $('<div></div>') .dialog({ autoOpen: false, minHeight: 0, resizable: false, width: 376 }) .bind('clickoutside', function(e) { $target = $(e.target); if (!$target.filter('.hint').length && !$target.filter('.hintclickicon').length) { $field_hint.dialog('close'); } }); // attach dialog element to .hint elements $('.hint').click(function() { var $hint = $(this); $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>'); $field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]); $field_hint.dialog('option', 'title', $hint.siblings('label').html()); $field_hint.dialog('open'); }); // trigger .hint dialog with an anchor tag referencing the form element $('.hintclickicon').click(function(e) { e.preventDefault(); $($(this).get(0).hash + ' .hint').trigger('click'); }); });
查看jQuery Outside Events插件
让你做：
$field_hint.bind('clickoutside',function(){ $field_hint.dialog('close'); });
对不起，拖了这么长时间，但我用下面。 任何缺点？ 看到打开的function…
$("#popup").dialog( { height: 670, width: 680, modal: true, autoOpen: false, close: function(event, ui) { $('#wrap').show(); }, open: function(event, ui) { $('.ui-widget-overlay').bind('click', function() { $("#popup").dialog('close'); }); } });
忘记使用另一个插件：
这里有3个方法来closures一个jQuery UI对话框，当点击外面的popin时：
如果对话框是模式/有背景覆盖： 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'); }) } }); });
如果对话框是非模态的方法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; } });
只需添加这个全局脚本，closures所有的modal dialog，只需点击它们。
$(document).ready(function() { $(document.body).on("click", ".ui-widget-overlay", function() { $.each($(".ui-dialog"), function() { var $dialog; $dialog = $(this).children(".ui-dialog-content"); if($dialog.dialog("option", "modal")) { $dialog.dialog("close"); } }); });; });
$(".ui-widget-overlay").click (function () { $("#dialog-id").dialog( "close" ); });
小提琴上演示了上面的代码。
我必须做两件事。 首先是外部点击处理程序：
$(document).on('click', function(e){ if ($(".ui-dialog").length) { if (!$(e.target).parents().filter('.ui-dialog').length) { $('.ui-dialog-content').dialog('close'); } } });
这会在通用的ui-dialog-content类上调用dialog('close') ，如果点击不是从一个对话框开始的话，closures所有的对话框。 它也将与modal dialog一起工作，因为叠加层不是.ui-dialog一部分。
问题是：
- 大多数对话框是由于对话框外的点击而创build的
- 这个处理程序在这些点击创build一个对话框之后运行，并冒泡到文档中，所以它立即closures它们。
要解决这个问题，我必须添加stopPropagation到这些点击处理程序：
moreLink.on('click', function (e) { listBox.dialog(); e.stopPropagation(); //Don't trigger the outside click handler });
这个问题有点老了，但是如果有人想closures一个用户在某处点击的非modal dialog时，可以使用我从JQuery UI Multiselect插件中获取的对话框。 主要优点是点击不是“丢失”（如果用户想点击一个链接或一个button，操作完成）。
$myselector.dialog({ title: "Dialog that closes when user clicks outside", modal:false, close: function(){ $(document).off('mousedown.mydialog'); }, open: function(event, ui) { var $dialog = $(this).dialog('widget'); $(document).on('mousedown.mydialog', function(e) { // Close when user clicks elsewhere if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){ $myselector.dialog('close'); } }); } });
你可以做到这一点，而不使用任何额外的插件
var $dialog= $(document.createElement("div")).appendTo(document.body); var dialogOverlay; $dialog.dialog({ title: "Your title", modal: true, resizable: true, draggable: false, autoOpen: false, width: "auto", show: "fade", hide: "fade", open:function(){ $dialog.dialog('widget').animate({ width: "+=300", left: "-=150" }); //get the last overlay in the dom $dialogOverlay = $(".ui-widget-overlay").last(); //remove any event handler bound to it. $dialogOverlay.unbind(); $dialogOverlay.click(function(){ //close the dialog whenever the overlay is clicked. $dialog.dialog("close"); }); } });
这里$对话框是对话框。 我们基本上做的是每当打开对话框时获取最后一个覆盖小部件，并将点击处理程序绑定到该覆盖上，以随时closures$对话框。
不需要外部事件插件…
只需添加一个事件处理程序到.ui-widget-overlay div：
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){ jQuery("#ui-dialog-selector-goes-here").dialog("close"); return false; });
只要确保无论您用于jQuery ui对话框的select器是否也被调用来closures它。即＃ui-dialog-selector-goes-here
这不使用jQuery UI，而是使用jQuery，对于那些因为任何原因不使用jQuery UI的人可能会有用。 这样做：
function showDialog(){ $('#dialog').show(); $('*').on('click',function(e){ $('#zoomer').hide(); }); } $(document).ready(function(){ showDialog(); });
所以，一旦我显示一个对话框，我添加一个点击处理程序，只查找任何东西的第一次点击。
现在，如果我可以忽略对#dialog及其内容的任何点击，但是当我尝试用$（'：'（“＃dialog，＃dialog *”）切换$（'*'） '），它仍然检测到#dialog点击。
无论如何，我是用这个纯粹的照片灯箱，所以它为此目的行得通。
给定的例子使用一个id为“#dialog”的对话框，我需要一个closures任何对话框的解决scheme：
$.extend($.ui.dialog.prototype.options, { modal: true, open: function(object) { jQuery('.ui-widget-overlay').bind('click', function() { var id = jQuery(object.target).attr('id'); jQuery('#'+id).dialog('close'); }) } });
感谢我的同事Youri Arkesteijn提出使用原型的build议。
对于那些你感兴趣的人，我创build了一个通用插件，当点击它的外部时可以closures对话框，无论是模态还是非modal dialog。 它支持在同一页面上的一个或多个对话框。
更多信息在这里： http : //www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
洛朗
我在这里使用这个解决scheme：
var g_divOpenDialog = null; function _openDlg(l_d) { // http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside jQuery('body').bind( 'click', function(e){ if( g_divOpenDialog!=null && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ){ _closeDlg(); } } ); setTimeout(function() { g_divOpenDialog = l_d; g_divOpenDialog.dialog(); }, 500); } function _closeDlg() { jQuery('body').unbind('click'); g_divOpenDialog.dialog('close'); g_divOpenDialog.dialog('destroy'); g_divOpenDialog = null; }
在一个页面上制作预览模式时，我遇到了同样的问题。 经过大量的谷歌search，我发现这个非常有用的解决scheme。 事件和目标是检查点击发生的地方，并根据它触发行动或什么都不做。
代码片段库网站
$('#modal-background').mousedown(function(e) { var clicked = $(e.target); if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) return; } else { $('#modal-background').hide(); } });
这是我为我的非模式对话框工作的唯一方法
$(document).mousedown(function(e) { var clicked = $(e.target); // get the element clicked if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) { return; // click happened within the dialog, do nothing here } else { // click was outside the dialog, so close it $('#dlg').dialog("close"); } });
所有功劳都归Axle所有
点击外部非modal dialogclosures
İt的简单，其实你不需要任何插件，只是jQuery的，或者你可以用简单的JavaScript来做到这一点。
$('#dialog').on('click', function(e){ e.stopPropagation(); }); $(document.body).on('click', function(e){ master.hide(); });
我不认为使用$（'。any-selector'）从整个DOM中find对话框的东西是如此明亮。
尝试
$('<div />').dialog({ open: function(event, ui){ var ins = $(this).dialog('instance'); var overlay = ins.overlay; overlay.off('click').on('click', {$dialog: $(this)}, function(event){ event.data.$dialog.dialog('close'); }); } });
你真的从它所属的对话框实例中获得覆盖，事情永远不会出错。
使用下面的代码，你可以模拟点击对话框的“closures”button（改变string“MY_DIALOG”为你自己的对话框的名称）
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
