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;
            }
        }
    }

Answer 3

我还有一个“模态”主要对话框的解决方案。

我只想添加click事件，单击我的按钮以打开Dialog。当我点击身体元素上的任何东西时，并非总是如此。

将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();
       })
   });
}

Answer 4

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

我写了一个 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()">

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

4 个答案: