如何通过单击框覆盖的区域之外来关闭 jQuery UI 模式对话框?

How to close a jQuery UI modal dialog by clicking outside the area covered by the box?(如何通过单击框覆盖的区域之外来关闭 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 heshe 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.

我该怎么做?

推荐答案

澄清一下，Victor 的回答只有在对话框设置为 autoOpen: true(对话框的默认值)时才有效，并且您不会再次打开带有事件的对话框.如果您在任何时候使用 click 之类的事件打开对话框，无论 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 演示覆盖 click 事件的失败:http://jsfiddle.net/GKfZM/

Fiddle demonstrating failure of overlay click event with autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle 演示 live 如何与 autoOpen: false 和 click 事件一起工作:http://jsfiddle.net/GKfZM/1/

Fiddle demonstrating how live works with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/1/

总结:维克多的答案只在特定条件下有效.

Summary: Victor's answer only works under certain conditions.

教程链接

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