Модальный диалог jQuery UI закрывается при нажатии

Question

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

function overlayclickclose() {
    if (closedialog) {
        jQuery('#mydialog').dialog('close');
    }
}
closedialog = 1;

jQuery('#mydialog').dialog({
    bgiframe: true,
    autoOpen: false,
    modal: true,
    width: 900,
    height: 400,
    resizable: false,
    open: function() {
        closedialog = 1;
        jQuery(document).bind('click', overlayclickclose);
    },
    focus: function() {
        closedialog = 1;
    },
    close: function() {
        jQuery(document).unbind('click');
    }
});

Когда я нажимаю на это модальное диалоговое окно в любом месте, оно закрывается, поэтому я не могу работать с ним. Как я могу это исправить?

Обратите внимание, что мой div находится на панели обновления и помещает пользовательский элемент управления ASP.NET Внутри.

Answer 1

Если вы хотите знать, почему диалоговое окно закрывается, как только вы щелкаете в любом месте вашего диалога. Вы добавили прослушиватель событий .click() ко всему документу, каждый раз, когда происходит щелчок, он запускает функцию обратного вызова overlayclickclose().

Это проверяет, хотите ли вы закрыть диалоговое окно:

if (closedialog)

Поскольку closedialog всегда 1, что в качестве логического значения равно true любой щелчок в любом месте закроет диалоговое окно. Ваша функция в основном скажет if (true) что-то сделать, поэтому всегда будет «делать что-то».

Если вы измените фокусное событие на:

closedialog = 0;

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

Посмотрите, как это работает здесь

Смотрите, это не работает, как у вас здесь

---

После быстрого поиска похоже, что используемый вами код очень похож на в этом руководстве - смотрите 1 и 0 для closedialog переменная.

---

Есть еще один способ сделать это, вероятно, легче следовать в коде. Смотрите вопрос здесь . Вы можете изменить свой код на что-то вроде этого:

$('#mydialog').dialog({
    bgiframe: true,
    autoOpen: true,
    modal: true,
    width: 300,
    height: 200,
    resizable: false
});

$('.ui-widget-overlay').live('click', function() {
    $('#mydialog').dialog('close');
}); 

Посмотрите, как это работает здесь

Answer 2

Если вопрос заключается в том, «почему закрывается этот диалог, когда щелкают элементы внутри него?», Тогда ответ заключается в том, что события щелчка из подэлементов распространяются на родительский элемент. См. event.stopPropagation () , чтобы узнать, как остановить это. Надеюсь, это поможет.