Должны ли все базовые элементы быть отключены, когда отображается диалоговое окно jQuery?

Question

Должны ли все базовые элементы быть отключены, когда отображается диалоговое окно jQuery?

0

У меня есть веб-страница с диалогом, который я показываю с помощью jQuery.dialog (jQuery 1.7.1, jQuery-UI 1.8.18). Я создаю его вот так:

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true, // etc....
});

На той же странице у меня есть элемент управления списком, который я построил из стека элементов <div>. Я слушаю клики по сложным элементам <div>:

$("#listEmployees div").on("click", "input", listEmployees_ItemClicked);

где listEmployes_ItemChecked - это мой обработчик событий. Когда я показываю диалог jQuery, большинство элементов на странице HTML отключены; т.е. они не реагируют на щелчки мыши и c. Однако мой стек списков не является: если я нажимаю на элементы в нем, обработчик события вызывается.

Чтобы обойти эту проблему, мне пришлось ввести глобальную переменную на странице, isDialogVisible которую мой диалог устанавливает, когда она открывается и очищается, когда она закрывается. Обработчик события затем игнорирует событие, если глобальная переменная истинна. Излишне говорить, что это взломать и не будет хорошо масштабироваться.

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

John Källén 12 нояб. 2013, в 12:30

Источник

1

обычно это проблема z-index. Диалог создает наложение над страницей, которое не позволяет пользователю взаимодействовать с ним. Если вы можете взаимодействовать со списком на странице, его z-индекс должен быть выше, чем у оверлея / диалогового окна. Взгляни туда.
Adam Botley 12 нояб. 2013, в 10:56
0

Семантически, если это модальное окно, никакой другой элемент управления на странице не должен реагировать, пока он открыт. Так что да, вы должны ожидать, что ничего не доступно. Но, возможно, ваше модальное окно имеет z-индекс ниже, чем список, по которому вы все еще можете щелкнуть ...
Flater 12 нояб. 2013, в 10:56
0

Таким образом, я не могу ожидать, что функция dialog () jQuery устроит так, чтобы диалоговое окно имело z-индекс выше, чем все другие элементы? Похоже, это было бы желательным поведением по умолчанию для модального диалога.
John Källén 12 нояб. 2013, в 11:14

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

обычно это проблема z-index. Диалог создает наложение над страницей, которое не позволяет пользователю взаимодействовать с ним. Если вы можете взаимодействовать со списком на странице, его z-индекс должен быть выше, чем у оверлея / диалогового окна. Взгляни туда.
Семантически, если это модальное окно, никакой другой элемент управления на странице не должен реагировать, пока он открыт. Так что да, вы должны ожидать, что ничего не доступно. Но, возможно, ваше модальное окно имеет z-индекс ниже, чем список, по которому вы все еще можете щелкнуть ...
Таким образом, я не могу ожидать, что функция dialog () jQuery устроит так, чтобы диалоговое окно имело z-индекс выше, чем все другие элементы? Похоже, это было бы желательным поведением по умолчанию для модального диалога.

Adam Botley · Answer 1 · 2013-11-12T10-14-00.000Z

Диалоги jQuery UI (более ранние версии, чем 1.10) имеют zIndex. Установите zIndex на значение, превышающее любой z-index, используемый в вашем CSS.

например.

$(theDialog).dialog({
    autoOpen: false,
    width: "800px",
    modal: true,
    zIndex: 99
});

Эта функция была удалена с jQuery UI v1.10:

Удалена опция zIndex

Подобно опции стека, опция zIndex не нужна при правильной реализации стекирования. Z-индекс определен в CSS, и теперь управление стеками контролируется тем, что сфокусированное диалоговое окно является последним элементом "stacking" в его родительском элементе.

Диалоги jQuery UI имеют метод moveToTop(), но это только перемещает диалог в начало контекста диалога, поэтому он находится над любыми другими диалоговыми окнами на странице. Это задача разработчиков для обеспечения их CSS не вызывает проблем с укладкой. "К сожалению", пользовательский интерфейс jQuery не держит нас за руку.