关闭PrimeFaces对话框,单击对话框外部

Question

我有一个典型的primefaces对话框,它工作得很好,但是当有人在对话框外点击时,我找不到任何选项让它关闭.我已经看到了一些jquery示例,我猜我可以调整那些用于primefaces对话框,但首先想确保没有解决方案吗？

谢谢.

Answer 1

您可以为onClick事件编写javascript函数并关闭对话框.

<h:body onclick="closeDialog();">

function closeDialog(){
   widgetWarDialog.hide();
}

Answer 2

只需共享可在任何模式对话框中全局使用的解决方案即可。改编自http://blog.hatemalimam.com/get-widgetvar-by-id/的代码。

显示对话框时，将创建一个遮罩（具有.ui-dialog-mask类），并具有打开的对话框的ID，并附加“ _modal”关键字。

单击该蒙版时，此脚本获取该ID，删除该附加的文本，并找到要关闭的相应小部件。

要使用它，只需将代码保存在.js文件中，然后导入您的页面即可使用。

在Primefaces 6.0上测试。

    /**
     * Listener to trigger modal close, when clicked on dialog mask.
     */
    $(document).ready(function(){
    $("body").on("click",'.ui-dialog-mask',function () {
        idModal = this.id;
        idModal = idModal.replace("_modal","");
        getWidgetVarById(idModal).hide();
    })
});

    /**
     * Returns the PrimefacesWidget from ID
     * @param id
     * @returns {*}
     */
    function getWidgetVarById(id) {
        for (var propertyName in PrimeFaces.widgets) {
            var widget = PrimeFaces.widgets[propertyName];
            if (widget && widget.id === id) {
                return widget;
            }
        }
    }