6

私の以前の調査によると、ダイアログを閉じるために、ダイアログの周りのオーバーレイでライブ クリック イベントをトリガーする方法を理解することができました。ただし、これにより、このダイアログ機能のさらなる開発はモーダルに制限されます。ダイアログを非モーダルに設定すると、クリック イベントをトリガーするオーバーレイがありません。オーバーレイ クリック イベントを使用せずにダイアログの外をクリックすると閉じるようにダイアログ (現在はモーダルではありません) を設定するにはどうすればよいですか?

これが私のダイアログと、オーバーレイからダイアログを閉じることができるその後のライブ クリック イベントです。

$("#dialog-search").dialog({
    resizable: false,
    height:dimensionData.height,
    width: dimensionData.width,
    modal: false,
    title: dimensionData.title,
    position: [x,y],
    close: function(event, ui){
       callBack(event,ui);
    }
});
$('.ui-widget-overlay').live('click', function() {
    $('#dialog-search').dialog("close");
});
4

1 に答える 1

8

最後に、私自身の質問に対する答えを見つけました。マウスダウン イベントをドキュメント自体にバインドし、ダイアログを除外することで、オーバーレイのライブ関数の機能を複製できます。コードの下に、ソリューションを示す jsFiddle を含めました。

// Listen for document click to close non-modal dialog
$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('#dlg').dialog("close");
    }
});

http://jsfiddle.net/elwayman02/Z5KA2/

于 2011-10-28T01:53:35.443 に答える