Son*_*nny 111 javascript jquery jquery-ui jquery-ui-dialog
我有一个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');
});
});
stu*_*c85 156
很抱歉在这么久之后拖了它,但我使用了下面的内容.有什么缺点？看到开放功能......
$("#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');
});
}
});
Jas*_*son 78
忘记使用另一个插件:
以下是在单击外部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;
}
});
Pet*_*dIt 30
让你做:
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});
Mic*_*ati 17
只需添加此全局脚本即可关闭所有模态对话框,只需单击它们即可.
$(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");
}
});
});;
});
jk.*_*jk. 10
$(".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');
}
}
});
这将调用dialog('close')泛型ui-dialog-content类,因此如果单击不是来自一个对话框,则会关闭所有对话框.它也适用于模态对话框,因为叠加层不是.ui-dialog框的一部分.
问题是:
要解决这个问题,我必须将stopPropagation添加到这些点击处理程序:
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});
这个问题有点旧,但是如果有人想在用户点击某个地方时关闭一个非模态的对话框,你可以使用我从JQuery UI Multiselect插件中获取的对话框 .主要优点是点击不会"丢失"(如果用户想要点击链接或按钮,则操作完成).
$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