[英]jQuery UI - Close Dialog When Clicked Outside
我有一個 jQuery UI 對話框,單擊特定元素時會顯示該對話框。 如果在這些觸發元素或對話框本身以外的任何地方發生點擊,我想關閉對話框。
這是打開對話框的代碼:
$(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');
});*/
});
如果我取消對最后一部分的注釋,對話框將永遠不會打開。 我認為這是因為打開對話框的相同點擊再次關閉它。
最終工作代碼
注意:這是使用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');
});
});
很抱歉拖了這么久,但我使用了下面的。 有什么缺點嗎? 看到打開的功能...
$("#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');
});
}
});
忘記使用另一個插件:
以下是在 popin 外部單擊時關閉 jquery UI 對話框的 3 種方法:
如果對話框是模態的/有背景覆蓋: 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;
}
});
只需添加此全局腳本,只需單擊它們的外部即可關閉所有模式對話框。
$(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')
,因此如果單擊不是源自一個對話框,則會關閉所有對話框。 它也適用於模態對話框,因為覆蓋不是.ui-dialog
框的一部分。
問題是:
為了解決這個問題,我必須將 stopPropagation 添加到這些點擊處理程序中:
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});
這個問題有點老了,但是如果有人想在用戶單擊某處時關閉一個非模態對話框,您可以使用我從JQuery UI Multiselect plugin 中獲取的這個。 主要優點是點擊不會“丟失”(如果用戶想要點擊鏈接或按鈕,則操作已完成)。
$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");
});
}
});
這里 $dialog 是對話框。 我們基本上要做的是在打開此對話框時獲取最后一個覆蓋小部件,並將單擊處理程序綁定到該覆蓋以在單擊覆蓋時關閉 $dialog。
不需要外部事件插件...
只需向 .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 對話框的任何選擇器也被調用以關閉它.. 即#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 及其內容的任何點擊,那就更好了,但是當我嘗試將 $('*') 與 $(':not("#dialog,#dialog *") 切換時'),它仍然檢測到#dialog 點擊。
無論如何,我純粹是將它用於照片燈箱,因此它可以用於此目的。
給定的示例使用一個 ID 為“#dialog”的對話框,我需要一個關閉任何對話框的解決方案:
$.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 建議使用原型。
這是我的非模態對話框中唯一對我有用的方法
$(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
單擊非模態對話框外部以關閉
對於那些您感興趣的人,我創建了一個通用插件,無論是模態對話框還是非模態對話框,單擊它外部時都可以關閉對話框。 它支持同一頁面上的一個或多個對話框。
更多信息在這里: http : //www.coheractio.com/blog/closure-jquery-ui-dialog-widget-when-clicking-outside
洛朗
我使用基於此處發布的解決方案的此解決方案:
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;
}
我在一頁上制作預覽模式時遇到了同樣的問題。 經過大量谷歌搜索后,我發現了這個非常有用的解決方案。 對於事件和目標,它會檢查點擊發生的位置,並根據它觸發操作或不執行任何操作。
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});
其實很簡單,你不需要任何插件,只需要 jquery 或者你可以用簡單的 javascript 來完成。
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});
我認為從整個 DOM 中使用 $('.any-selector') 查找對話框內容並不是那么聰明。
嘗試
$('<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');
});
}
});
您確實是從它所屬的對話框實例中獲取覆蓋層,這樣永遠不會出錯。
使用以下代碼,您可以模擬單擊對話框的“關閉”按鈕(將字符串“MY_DIALOG”更改為您自己的對話框名稱)
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
智能代碼:我正在使用以下代碼,以便每件事都保持清晰可讀。 out side body 將關閉對話框。
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}
我最終使用了這段代碼,它應該適用於頁面上任何打開的對話框,忽略對工具提示的點擊,並清理正在關閉的對話框的資源。
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip') || clicked.parents().is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('.ui-dialog-content').dialog("close");
$('.ui-dialog-content').dialog("destroy");
$('.ui-dialog-content').detach();
}
});
我剛遇到需要通過元素外單擊來關閉 .dialog(s)。 我有一個包含很多信息對話框的頁面,所以我需要一些東西來處理它們。 我是這樣處理的:
$(document).ready(function () {
$(window).click(function (e) {
$(".dialogGroup").each(function () {
$(this).dialog('close');
})
});
$("#lostEffClick").click(function () {
event.stopPropagation();
$("#lostEffDialog").dialog("open");
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.