将 PrimeFaces 对话框更改为客户端的模态答案

【问题标题】：Change PrimeFaces dialog to be modal on client side将 PrimeFaces 对话框更改为客户端的模态
【发布时间】：2013-02-15 09:55:03
【问题描述】：

我有一个这样的 primefaces 对话框：

<p:dialog widgetVar="dlg" width="320" height="220" modal="false" closable="false" showHeader="false" resizable="false" position="right,top">

如果我单击页面中的某个元素，我想将此对话框更改为模态。是否有用于此的客户端 API？

试过了

onclick="dlg.setModal(true);"

没有成功。方法 setModal() 不存在。是否可以在不往返服务器的情况下以这种方式更改对话框？

【问题讨论】：

标签： javascript primefaces dialog modal-dialog client-side

【解决方案1】：

你有这个（模态）的属性，现在它设置为假 madal="true"

【讨论】：

那么它在创建时是模态的。挑战在于将非模态对话框更改为模态对话框，无需服务器往返，只有客户端 JavaScript。

【解决方案2】：

您是否将 Firefox 与 Firebug 或其他可以向您显示 DOM 元素 dlg 的浏览器/网络开发工具一起使用？

在那里您可以发现dlg 具有show() 和hide() 方法，以及enableModality() 和disableModality()。这些（几乎）是你想要的。

不幸的是，enable... 和disable 并没有（正如人们可能认为的那样）设置使对话框在显示时变为模态的选项。相反，他们显示或隐藏“停电” div。所以当你想要一个动态的模态对话框时，不要通过Javascript调用dlg.show()，而是调用dlg.enableModality(); dlg.show()，反之亦然。

编辑：

还有属性dlg.cfg 包含一些设置。看来，如果您只是设置dlg.cfg.modal=true（当时是否存在该设置），那么下次显示dlg时，它是模态的（但是，与在您的xhtml中设置它不同，它仍然是可拖动的并且可调整大小）。

【讨论】：