2011-10-27 27 views
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"); 
}); 
+0

他のいくつかの方法 - 多少似て:http://stackoverflow.com/a/9101242/335514 – Jason

答えて

7

が最後に自分の質問への答えを考え出した:

は、ここに私のダイアログと私は、オーバーレイから、ダイアログを閉じることができ、その後のライブクリックイベントです。 mousedownイベントをドキュメント自体にバインドし、ダイアログを除外することで、オーバーレイのライブ関数の機能を複製することができます。コードの下には、ソリューションを示す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/

+0

きちんと!多くの他のソリューションを試してみましたが、これだけはうまくいきました! – DiegoDD

+0

これは本当に役に立ちました。ありがとう! –

関連する問題