如何通过单击框所覆盖的区域外单击关闭jQuery UI模式对话框?
我正在使用jQuery 1.6和jQuery UI。我成功实现了一个模式对话框窗口,其宽度几乎是我的应用程序网页宽度的50%。我想给用户另一种关闭对话框的方式,这样当他在模态框点击页面覆盖区域之外时,这个将被关闭,就好像用户点击了右上角的标准x按钮。
I am using jQuery 1.6 and jQuery UI. I successfully implemented a modal dialog window which width is almost 50% of my application web page' width. I would like to give to the user another way to close the dialog so that when he\she clicks outside the area covered on the page by the "modal box", this one will be closed as if the user clicked on the "standard" "x" button on the top-right of that.
我该怎么做?
为了澄清,如果对话框设置为 autoOpen:true $,Victor的答案才有效c $ c>,对话框的默认值和您不会使用事件打开再次对话框。如果您打开带有
等事件的对话框,请随时点击
,无论 autoOpen
是否设置为 true
或 false
,然后你必须使用 jQuery.live
。
To clarify, the answer by Victor only works if the dialog is set to autoOpen: true
, the default value of the dialog, and you do not open the dialog again with an event. If you open the dialog with an event like click
at any point whether autoOpen
is set to true
or false
, then you have to use jQuery.live
.
使用 autoOpen:false
:表示覆盖单击
事件失败a href =http://jsfiddle.net/GKfZM/ =noreferrer> http://jsfiddle.net/GKfZM/
Fiddle demonstrating failure of overlay click
event with autoOpen: false
: http://jsfiddle.net/GKfZM/
小提琴演示如何生活
与 autoOpen:false
一起使用,并使用点击
事件: http://jsfiddle.net/GKfZM/1/
Fiddle demonstrating how live
works with autoOpen: false
and with click
event: http://jsfiddle.net/GKfZM/1/
摘要: Victor的答案仅适用于某些条件。
Summary: Victor's answer only works under certain conditions.