10

我有一个典型的 primefaces 对话框，效果很好，但是当有人在对话框外单击时，我找不到任何关闭它的选项。我已经看过一些 jquery 示例，我猜我可以将它们调整为 primefaces 对话框，但首先要确保没有解决方案？

谢谢。

4

4 回答 4

8

只是分享我在全球范围内适用于任何模式对话框的解决方案。代码改编自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;
            }
        }
    }
于 2017-02-06T18:06:52.467 回答
6

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

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

function closeDialog(){
   widgetWarDialog.hide();
}
于 2013-01-30T06:53:49.143 回答
0

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

当我的按钮被点击打开对话框时，我只想添加点击事件。当我单击 body 元素上的任何内容时，并非总是如此。

将 styleClass 添加到您的按钮。例如 styleClass="mybutton-class"。然后将 widgetVar 添加到您的<p:dialog widgetVar="widgetVarName" ...>

        jQuery(".mybutton-class").on("click", function() {
            jQuery('.ui-widget-overlay').click(function(){
                PF('widgetVarName').hide();
            })
        });

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();
       })
   });
}
于 2015-08-26T09:41:16.760 回答
0

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

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

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

并在对话的“onShow”标签中调用函数

<p:dialog id="test-dialog"
          widgetVar="test-dialog-widget"          
          modal="true"          
          onShow="addListenerOnDialogueOverlay()">
于 2021-04-08T15:47:46.717 回答