JQuery1.6とjQueryUIを使用しています。 モーダルダイアログ ウィンドウの実装に成功しました。このウィンドウの幅は、アプリケーションのWebページの幅のほぼ50%です。ユーザーにダイアログを閉じる別の方法を提供したいので、ユーザーが「モーダルボックス」でページが覆われている領域の外側をクリックすると、これが表示されます。ユーザーがその右上にある「標準」「x」ボタンをクリックしたかのように閉じます。
どうすればいいですか?
明確にするために、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/
要約:ビクターの答えは特定の条件下でのみ機能します。
更新
これが最初の答えでした:
$(".ui-widget-overlay").click (function () {
$("#your-dialog-id").dialog( "close" );
});
これが実用的なソリューションです。
$('.ui-widget-overlay').live('click', function() {
$('#your-dialog-id').dialog( "close" );
});
この方法はどうですか。この方法では、ダイアログがどこからどのIDで開いていても、ダイアログを閉じることができます。これはグローバル関数です。
$("body").on("click",".ui-widget-overlay",function() {
$(".ui-dialog-titlebar-close").click();
});
[モデルを閉じる]ダイアログボックスには2つのオプションがあります
$('#your-dialog-id').modal('toggle');
OR
外側のボックスをクリックすると、クリックイベントを直接使用できます
$("#your-dialog-id .close").click()