primefaces - ダイアログの外側をクリックすると PrimeFaces ダイアログが閉じます

Question

典型的なprimefacesダイアログがあり、うまく機能しますが、誰かがダイアログの外をクリックしたときに閉じるオプションが見つかりません。私はいくつかのjqueryの例を見てきましたが、それらをprimefacesダイアログに適応させることができると思いますが、最初にまだ解決策がないことを確認したかったのですか?

ありがとう。

Answer 1

onClick イベントの JavaScript 関数を記述して、ダイアログを閉じることができます。

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

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

Answer 2

「モーダル」プライムフェイス ダイアログの別の解決策があります。

ボタンをクリックしてダイアログを開くときに、クリックイベントを追加したいだけです。そして、ボディ要素の何かをクリックすると常にではありません。

ボタンに 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();
       })
   });
}