PrimeFaces dialog close on click outside of the dialog

Question

I have a typical primefaces dialog and it works great but I can't find any options to have it close when someone clicks outside the dialog. I have seen a few jquery examples and I'm guessing I can adapt those for the primefaces dialog but first wanted to make sure there wasn't a solution already?

Thanks.

Answer 1

Just sharing my solution that works globally for any modal dialog. Code adapted from http://blog.hatemalimam.com/get-widgetvar-by-id/ .

When you show a dialog, a mask (that has the .ui-dialog-mask class) is created, and it has the id of the opened dialog, appended with a "_modal" keyword.

This scripts gets that id when that mask is clicked, removes that appended text, and finds the corresponding widget to be closed.

To use it, just save the code on a .js file, import on your page and it will work.

Tested on 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 2

You can write a javascript function for onClick event and close the dialog.

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

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