web-dev-qa-db-ja.com

jquery-ui-dialog-ダイアログクローズイベントにフックする方法

jquery-ui-dialog プラグインを使用しています

状況によってはダイアログが閉じているときにページを更新する方法を探しています。

ダイアログから終了イベントをキャプチャする方法はありますか？

閉じるボタンがクリックされたときにコードを実行できることは知っていますが、エスケープまたは右上隅のxで閉じるユーザーをカバーしていません。

javascriptjqueryjquery-uimodal-dialogjquery-ui-dialog
179
Brownie

私はそれを見つけた！

次のコードを使用して、closeイベントをキャッチできます。

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

もちろん、アラートを必要なものに置き換えることができます。
編集： Jquery 1.7以降、bind（）はon（）になりました

244
Brownie

ダイアログを作成しているときにもできると思います（私がやったプロジェクトからコピーしました）：

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

注close: CloseFunction

182
Darryl Hein
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true, 
buttons: {
  "SUBMIT": function() { 
    $("form").submit();
  }, 
  "CANCEL": function() { 
    $(this).dialog("close");
  } 
},
**close: function() {
  alert('close');
}**
});
31
Mo Ming C
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

ダイアログの「close」プロパティは、そのためのcloseイベントを提供します。

20
Taksh

Uもこれを試すことができます

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });
14
Umair Noor

これは私のために働いたものです...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});
10
morttan

JQuery 1.7以降、.on（）メソッドは、イベントハンドラーをドキュメントにアタッチするための推奨メソッドです。

on()の代わりに.bind()を使用して実際に誰も回答を作成しなかったため、私は1つを作成することにしました。

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});
8
Disper

サンプルのようにオプション 'close'を追加し、インライン関数を実行します

close: function(e){
    //do something
}
6
Mehdi Roostaeian

あなたが話しているウィンドウのタイプを理解していれば、 $（window）.unload（） （ダイアログウィンドウ用）必要なフックを提供しますか？

（そして、私が誤解していて、あなたがポップアップブラウザウィンドウではなくCSS経由で作成されたダイアログボックスについて話しているなら、 すべて そのウィンドウを閉じる方法は、クリックハンドラーを登録できる要素です。）

編集： ああ、今はCSS経由で作成されるjquery-uiダイアログについて話しているのがわかります。あなたはフックすることができます バツ 要素のクリックハンドラーをクラスに登録することでウィンドウを閉じます ui-dialog-titlebar-close。

おそらく、もっと便利なのは、それをすばやく理解する方法を教えてくれることです。ダイアログを表示しながら、FireBugを開いて 調べる ウィンドウを閉じることができる要素。それらがどのように定義されているかがすぐにわかり、クリックハンドラを登録するために必要なものが得られます。

あなたの質問に直接答えるために、答えは本当に「いいえ」であると信じています-あなたがフックできるクローズイベントはありませんが、「はい」-あなたはかなり簡単にダイアログボックスを閉じて取得するすべての方法をフックすることができますあなたが欲しいもの。

4
andy

アイテムの終了イベントをキャプチャするために、ページ、ダイアログなどの次のコードを試すことができます。

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
2
Alexei