Проблема в Z-индексе меню и ajax ModalPopupExtender в ASP.net

Question

Я использую Ajax ModalPopupExtender, но проблема в том, что меню в приложении отображается поверх ModalPopupExtender. Я также установил z-index = 1 для ModalPopupExtender и z-index = 100 для, но проблема не решена.

Answer 1

После нескольких минут изучения того, как использовать Инструменты разработчика (F12 в Chrome / IE), я наконец-то дошел до корня проблемы.

Я собираюсь предположить, что здесь справедливо одно из двух: 1. Главное меню находится на главной странице, а элемент управления ModalPopupExtender находится на дочерней странице. 2. Элемент управления ModalPopupExtender размещается в том же элементе div, который содержит остальную часть содержимого страницы (за исключением главного меню), и этот элемент div имеет z-индекс ниже, чем элемент div, содержащий главное меню. (Даже если вы не указали эти значения z-index явно, эти div'ы будут наследовать значения автоматически.)

Если ваша ситуация относится к первой категории, то вот что происходит: сгенерированная разметка помещает лайтбокс в один элемент div вместе с остальным содержимым дочерней страницы (скажем, wrapperContent), а главное меню - в другой (скажем, wrapperHeader). Z-index для wrapperHeader ДОЛЖЕН быть больше, чем z-index для wrapperContent, в противном случае подменю упадут ниже содержимого при их раскрытии. Теперь, независимо от того, какое значение z-index вы указываете для лайтбокса, оно всегда будет отображаться под каждым элементом в wrapperHeader, так как он наследует свой z-индекс от wrapperContent, который ниже, чем у wrapperHeader.

Аналогичное объяснение следует в случае, если ваша ситуация попадает во вторую категорию.

@ Джек Маркетти, это также объясняет, почему это исправлено, когда вы помещаете лайтбокс в отдельный элемент div, отделенный от содержимого остальной части страницы.

Надеюсь, это поможет.

Answer 2

Используйте Firebug (расширение Firefox) или что-то подобное, чтобы проверить Z-индекс вашего меню. Затем установите Z-индекс 1 ModalPopupExtender выше.

Не видя живой страницы, я не могу угадать z-индекс, но он должен быть больше 100. Вы можете попробовать установить его на 10001 или что-то невероятно высокое.

Answer 3

Я занимался разработкой для Asp.Net около 4 лет, мой опыт подсказывает мне держаться подальше от библиотек Microsoft AJAX, особенно AJAX Control Toolkit. Там есть ошибки, которые, похоже, не собираются исправлять.

Мой вам совет: используйте другую библиотеку. Сейчас я использую JQuery, плагины, которые вы найдете для JQuery в сети, имеют разное качество, но некоторые из них действительно хороши, а другие я исправил самостоятельно (я выбираю только те, где я могу быстро понять код).

Пользовательский интерфейс JQuery имеет очень высокое качество, он включает диалоговый виджет, который я использую вместо ModalPopupExtender. Если вам не нравится стиль окна, посмотрите один из 15 плагинов, представленных на этой странице: 15 + Плагины и учебники для модальных диалоговых окон всплывающих окон .

Answer 4

Установите z-index на что-то действительно большое, как упомянутое @Jab.

Я также обнаружил, что если вы поместите ModalPopupExtender внизу вашей HTML-разметки, он иногда исправляет это по какой-то очень странной причине. Попробуйте.