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

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

Технические детали: Angular 1.5.8, Angular Material Design 1.1.3 - я тестирую обновление до этой версии, и именно тогда я заметил проблему с конфликтом редактора froala, Froala Version 2 (только что удален в прошлом месяце) angular-froala v. 2.4.2

Мы создаем div с помощью css, который устанавливает фон на background: rgba (0, 0, 0, 0.3) и второй div с сообщением, написанным белыми буквами и светлым изображением.

При активации экран становится серым везде, кроме текстового поля с директивой froala, которое остается белым. Установка z-index работает для отображения переднего плана двух оверлейных div, но не влияет на текстовое поле froala. Я пробовал установить z-index для каждой задействованной директивы, установив опцию froala z-index и установив для опции iframe iframe значение false.

Есть идеи попробовать что-нибудь еще?


person Briana Kew    schedule 04.03.2017    source источник
comment
Переместите оверлей div на последнюю позицию в теге body. Я не знаю froala, но я предполагаю, что он может добавлять саму разметку, поэтому вам, возможно, придется сделать этот шаг после завершения рендеринга страницы через javascript.   -  person K Scandrett    schedule 04.03.2017


Ответы (1)


Неважно - оказывается, что элемент, который я пытался затенять серым, на самом деле был дочерним элементом div, у которого фон был установлен для «затенения»

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

person Briana Kew    schedule 06.03.2017