jQuery UI - закрывать диалог при нажатии снаружи

Question

У меня есть диалоговое окно jQuery UI, которое отображается при нажатии на определенные элементы. Я хотел бы закрыть диалоговое окно, если щелчок происходит в любом месте, кроме тех, которые вызывают элементы или само диалоговое окно.

Вот код для открытия диалога:

$(document).ready(function() {
    var $field_hint = $('<div></div>')
        .dialog({
            autoOpen: false,
            minHeight: 50,
            resizable: false,
            width: 375
        });

    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });
    /*$(document).click(function() {
        $field_hint.dialog('close');
    });*/
});

Если я раскомментирую последнюю часть, диалог никогда не откроется. Я предполагаю, что это потому, что тот же клик, который открывает диалоговое окно, закрывает его снова.

* +1007 *

Окончательный рабочий код
Примечание: это использует jQuery внешние события плагин

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                width: 376
            })
            .bind('clickoutside', function(e) {
                $target = $(e.target);
                if (!$target.filter('.hint').length
                        && !$target.filter('.hintclickicon').length) {
                    $field_hint.dialog('close');
                }
            });

    // attach dialog element to .hint elements
    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
        $field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog('option', 'title', $hint.siblings('label').html());
        $field_hint.dialog('open');
    });

    // trigger .hint dialog with an anchor tag referencing the form element
    $('.hintclickicon').click(function(e) {
        e.preventDefault();
        $($(this).get(0).hash + ' .hint').trigger('click');
    });
});

Answer 1

В данном примере (ах) используется одно диалоговое окно с идентификатором '#dialog', мне нужно решение, которое закрывает любой диалог:

$.extend($.ui.dialog.prototype.options, {
    modal: true,
    open: function(object) {
        jQuery('.ui-widget-overlay').bind('click', function() {              
            var id = jQuery(object.target).attr('id');
            jQuery('#'+id).dialog('close');
        })
    }
});

Спасибо моему коллеге Юрию Аркестейну за предложение использовать прототип.

Answer 2

Это единственный метод, который работал для меня в немодальном диалоге

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

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

Answer 3

У меня была такая же проблема при создании модального предварительного просмотра на одной странице. После долгих поисков я нашел это очень полезное решение. С событием и целью он проверяет, где произошел щелчок, и в зависимости от этого запускает действие или ничего не делает.

Сайт библиотеки фрагментов кода

$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);  
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content')) 
    return; 
} else {  
 $('#modal-background').hide();
}
});

Answer 4

Я использую это решение на основе одного из опубликованных здесь:

var g_divOpenDialog = null;
function _openDlg(l_d) {

  // /1901164/jquery-ui-zakryvat-dialog-pri-nazhatii-snaruzhi
  jQuery('body').bind(
   'click',
   function(e){
    if(
      g_divOpenDialog!=null 
      && !jQuery(e.target).is('.ui-dialog, a')
      && !jQuery(e.target).closest('.ui-dialog').length
    ){
      _closeDlg();
    }
   }
  );

  setTimeout(function() {
    g_divOpenDialog = l_d;
    g_divOpenDialog.dialog();
  }, 500);
}
function _closeDlg() {
  jQuery('body').unbind('click');
  g_divOpenDialog.dialog('close');
  g_divOpenDialog.dialog('destroy');
  g_divOpenDialog = null;
}

Answer 5

Для тех, кто вас заинтересовал, я создал универсальный плагин, который позволяет закрывать диалог при щелчке вне его, будь то модальный или немодальный диалог. Он поддерживает один или несколько диалогов на одной странице.

Больше информации здесь: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

Answer 6

Смарт-код: Я использую следующий код, чтобы все было понятно и читабельно. внешнее тело закроет диалоговое окно.

$(document).ready(function () {
   $('body').on('click', '.ui-widget-overlay', closeDialogBox);
});

function closeDialogBox() {
    $('#dialog-message').dialog('close');
}

Answer 7

С помощью следующего кода вы можете смоделировать щелчок по кнопке «Закрыть» диалогового окна (измените строку «MY_DIALOG» на название вашего собственного диалога)

$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Answer 8

Я не думаю, что поиск материала для диалога с использованием $ ('. Any-selector') из всего DOM такой яркий.

Попробуйте

$('<div />').dialog({
    open: function(event, ui){
        var ins = $(this).dialog('instance');
        var overlay = ins.overlay;
        overlay.off('click').on('click', {$dialog: $(this)}, function(event){
            event.data.$dialog.dialog('close');
        });
    }
});

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

Answer 9

На самом деле все просто, вам не нужны плагины, просто jquery, или вы можете сделать это с помощью простого javascript.

$('#dialog').on('click', function(e){
  e.stopPropagation();
});
$(document.body).on('click', function(e){
  master.hide();
});