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

Tweet

Category JavaScript 2013/01/17

問題

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

答え

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

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

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

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