BootStrap Модальный Неверный дисплей - PullRequest
Новая
       9

BootStrap Модальный Неверный дисплей

0 голосов
/ 05 марта 2019

Я обновил пользовательский интерфейс своей страницы, так что в центре изображения есть изображение и плавающий элемент div.У div есть кнопка, которая открывает модал (Bootstrap 3.3.7).Когда я нажимаю кнопку, все выглядит серым, и модальное окно открывается, но внутри div, и его нельзя увидеть полностью или закрыто.Вот скриншоты того же самого (не может включать полную страницу из-за проблем конфиденциальности и безопасности)

enter image description here enter image description here

Вот CSS для div: 

.card {
            /* For Shadow Effect*/
            box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
            transition: 0.3s;
            /* Diemensions */
            padding: 5px;
            width: 400px;
            height: 159px;
            text-align: center;
            border-radius: 1rem;
            /*making it stick to the centre*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* randome stuff*/
            background: #CFD8DC;
            margin: auto;
        }

1 Ответ

0 голосов
/ 05 марта 2019

Необходимо установить для свойства z-index вашего класса .card значение, превышающее перекрывающийся черный полупрозрачный элемент.

Чтобы провести более глубокий анализ, откройте веб-инспектор, чтобы углубиться в структуру HTML и найти перекрывающийся элемент, о котором я упоминал выше. Затем в свойствах стиля (должно быть справа) найдите свойство z-index. Если вы не можете найти его, проверьте его родительские элементы. Если вы по-прежнему не можете его найти, вы можете установить произвольное значение, большее нуля, чтобы ваша страница выглядела так, как вы хотите.

Имейте в виду, что z-index работает, только если для атрибута position установлено значение absolute или relative или fixed.

...