如何通过单击框所覆盖的区域外单击关闭jQuery UI模式对话框？ [英] How to close a jQuery UI modal dialog by clicking outside the area covered by the box?

问题描述

我正在使用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 ，对话框的默认值和您不会使用事件打开再次对话框。如果您打开带有等事件的对话框，请随时点击，无论 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.

教程链接

这篇关于如何通过单击框所覆盖的区域外单击关闭jQuery UI模式对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！