Нажмите за пределами немодального диалога, чтобы закрыть - PullRequest
Новая
       32

Нажмите за пределами немодального диалога, чтобы закрыть

6 голосов
/ 27 октября 2011

Согласно моему предыдущему исследованию, я смог выяснить, как вызвать событие живого щелчка на оверлее вокруг диалогового окна, чтобы закрыть диалоговое окно.Тем не менее, это ограничивает дальнейшее развитие этой функции диалога, чтобы быть модальным.Если я установлю диалог немодальным, наложение не будет вызывать событие щелчка.Как настроить закрытие диалогового окна (которое теперь не является модальным), когда я щелкаю за его пределами без использования события щелчка наложением?

Вот мой диалог и последующее событие живого щелчка, которое позволяет мне закрытьдиалог из оверлея: 

$("#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");
});

1 Ответ

8 голосов
/ 28 октября 2011

Наконец-то разобрался с ответом на свой вопрос. Привязав событие mousedown к самому документу и затем исключив диалоговое окно, мы можем дублировать функциональность функции live для наложений. Ниже кода я включил 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/

...