web-dev-qa-db-ja.com

ボックスで覆われた領域の外側をクリックしてjQueryUIモーダルダイアログを閉じるにはどうすればよいですか？

JQuery1.6とjQueryUIを使用しています。 モーダルダイアログ ウィンドウの実装に成功しました。このウィンドウの幅は、アプリケーションのWebページの幅のほぼ50％です。ユーザーにダイアログを閉じる別の方法を提供したいので、ユーザーが「モーダルボックス」でページが覆われている領域の外側をクリックすると、これが表示されます。ユーザーがその右上にある「標準」「x」ボタンをクリックしたかのように閉じます。

どうすればいいですか？

javascriptjqueryjquery-uimodal-dialog
9
Backo

明確にするために、Victorによる回答は、ダイアログがautoOpen: trueに設定されている場合にのみ機能します。これは、ダイアログのデフォルト値であり、およびではありません。イベントでダイアログをもう一度開きます。 clickがautoOpenまたはtrueに設定されているかどうかに関係なく、falseのようなイベントでダイアログを開く場合は、jQuery.live。

オーバーレイclickイベントの失敗をautoOpen: falseで示すフィドル： http://jsfiddle.net/GKfZM/

liveがautoOpen: falseおよびclickイベントとどのように連携するかを示すフィドル： http://jsfiddle.net/GKfZM/1/

要約：ビクターの答えは特定の条件下でのみ機能します。

チュートリアルリンク

5
jk.

更新

これが最初の答えでした：

$(".ui-widget-overlay").click (function () {
     $("#your-dialog-id").dialog( "close" );
});

これが実用的なソリューションです。

$('.ui-widget-overlay').live('click', function() {
     $('#your-dialog-id').dialog( "close" );
});
10
Victor

この方法はどうですか。この方法では、ダイアログがどこからどのIDで開いていても、ダイアログを閉じることができます。これはグローバル関数です。

   $("body").on("click",".ui-widget-overlay",function() {
     $(".ui-dialog-titlebar-close").click();
   });
5
Ken

[モデルを閉じる]ダイアログボックスには2つのオプションがあります

$('#your-dialog-id').modal('toggle');

OR

外側のボックスをクリックすると、クリックイベントを直接使用できます

$("#your-dialog-id .close").click()
1
Nikunj K.