HTML 解析器如何确定 <div> 是“模态对话框”？答案

【问题标题】：How can an HTML parser determine that a <div> is a 'modal dialog'?HTML 解析器如何确定 <div> 是“模态对话框”？
【发布时间】：2012-09-27 06:40:44
【问题描述】：

我了解模态对话框是一个警报或子窗口，根据Wikipedia，“需要用户与其交互才能返回到操作父应用程序”。

我在 HTML 页面中找到的所有模式对话框实例都是简单的 <div> 元素，例如 JQuery dialogs。其中一些确实会通过叠加层阻止用户与主页的交互，但有些甚至不是“模态”，因为用户可以在对话框存在时轻松与主页交互。

我问这个是因为我的一个 Selenium 测试收到 UnhandledAlertException: "Modal dialog present"。我想知道：Selenium 是如何知道存在模态对话框的？在 HTML 页面上看到许多 <div> 元素，是什么特殊属性使其中一个成为“对话框”而其他所有元素都不是？导致对话框变为“模态”的第二个属性是什么？

【问题讨论】：

试用 jQuery 的 modal dialog。它是一个对话框，您可以与之交互，但页面上什么都没有。
我做到了。这是另一个
...
那么你的问题是什么？您是在问它们是如何工作的吗？

标签： html modal-dialog

【解决方案1】：

在大多数情况下，伪模态对话框是两个 div，一个覆盖整个窗口，透明或着色，而另一个 div 位于其顶部，表示实际对话框（或单个 div 两者兼而有之的组合）。

要检测到这一点，您需要遍历 dom 以找到最大尺寸（接近窗口尺寸）的 div，位于位置 0,0 并且位置属性设置为绝对或固定，以及它的 z-索引。

但不能保证这适用于每种情况（并且存在各种实现），这意味着检测例程只能进行良好的猜测。

【讨论】：

【解决方案2】：

模态对话框是一个单独的窗口，在您关闭对话框之前，它会一直禁用打开器窗口。您可以使用window.showModalDialog method 打开一个模态对话框。

作为页面元素的对话框在这个意义上不是模态的。即使它使用覆盖覆盖页面中的所有内容以使您无法与之交互，该页面也不会被禁用。它只具有与模态对话框相同的实际效果。

作为页面元素的对话框甚至不是真正的对话框，它只是在大多数实际意义上像对话框一样工作。

像这样的“假”对话框通常更可取，因为真正的模态对话框需要自己的 HTML 文档。作为页面元素的对话框更易于设置，并且更易于与页面交互。

【讨论】：