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

我有一个典型的primefaces对话框，它工作得很好，但当有人在对话框外单击时，我找不到任何选项将其关闭。我已经看到了一些jquery示例，我猜我可以将它们应用到primefaces对话框中，但首先要确保还没有解决方案

---

谢谢。

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

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

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

函数closeDialog（）{
widgetWarDialog.hide（）；
}

对于“模态”primefaces对话框，我有另一种解决方案

我只想在单击按钮打开对话框时添加单击事件。当我在body元素上单击任何东西时，并非总是这样

向按钮添加样式类。例如styleClass=“mybutton类”。 然后将widgetVar添加到

Ajax更新事件的附加功能：

我构建了3个JS函数

//for the first time the page is loaded
jQuery(document).ready(function() {
    onLoadFunction();
});

//to load the script after you reload your page with ajax
jQuery(document).on("pfAjaxComplete", function(){
    onLoadFunction();
});

//your code you handle with
function onLoadFunction(){
   jQuery(".mybutton-class").on("click", function() {
       jQuery('.ui-widget-overlay').click(function(){
           PF('widgetVarName').hide();
       })
   });
}

---

只是分享我的解决方案，它适用于任何模式对话框。代码改编自

显示对话框时，将创建一个掩码（具有.ui对话框掩码类），该掩码具有打开对话框的id，并附加有“\u 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;
            }
        }
    }

---

这是一个8年前的问题，但最近我遇到了同样的问题，这里是我的解决方案，一个模态primefaces对话框

我编写了一个js函数，它在对话周围的覆盖面板中添加了一个侦听器

function addListenerOnDialogueOverlay() {
    document.getElementById('test-dialog_modal')
        .addEventListener('click', function (event) {
            PF('test-dialog-widget').hide();
        });
}

<p:dialog id="test-dialog"
          widgetVar="test-dialog-widget"          
          modal="true"          
          onShow="addListenerOnDialogueOverlay()">

并在对话的“onShow”标记中调用finction

function addListenerOnDialogueOverlay() {
    document.getElementById('test-dialog_modal')
        .addEventListener('click', function (event) {
            PF('test-dialog-widget').hide();
        });
}

<p:dialog id="test-dialog"
          widgetVar="test-dialog-widget"          
          modal="true"          
          onShow="addListenerOnDialogueOverlay()">

有人在页面主体上发布了一种使用onclick的方法，这可能会奏效。我用OverlyPanel替换了对话框，默认情况下，OverlyPanel会这样做，并为我提供了其他用途。谢谢。工作得很有魅力。这比将许多p:dialogs更改为p:overlypanel要好得多。这在桌面模式下有效，但在移动设备（iphonesafari）上不起作用。有关于如何在移动设备上使用此功能的提示吗？要在移动设备上使用此功能，请添加--touch或touchstart或tap等。但这对我来说很有用：

$（“body”）。在（“单击touchstart”、“.ui对话框掩码”上，函数（）

好消息是，这个解决方案不是全局性的。只需在您需要的可撤销对话框页面上包含JS，其他代码就不会受到影响。