SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery UI】dialogのmodalしたときdialogの外をクリックしたら閉じるようにする

問題

モーダルで開いたjQuery UIのダイアログを、オーバーレイのクリックで閉じるには。

jqueryui-modal-overlay

答え

ダイアログをこんなふうに開いたとき、

$( "#xxxxxxxx" ).dialog( {modal : true} );

こちらも仕掛けておくと、背後のオーバーレイ(ダイアログの外の半透明の部分)をクリックしたとき、ダイアログを閉じてくれる。

$( document ).on( "click", ".ui-widget-overlay", function(){
    $(this).prev().find(".ui-dialog-content").dialog("close");
} );

関連するメモ

コメント