Размытие контента на модальном шоу - PullRequest
Новая
       7

Размытие контента на модальном шоу

0 голосов
/ 28 января 2019

Я пытаюсь изменить класс, в котором находится весь контент моего сайта (обертка), в основном, когда пользователь нажимает на модальное окно, чтобы открыть, я добавляю стили для класса " обертка ", яиспользуя .modal-backgrop.in CSS, чтобы добавить еще один CSS, который является размытием, но не работает.

Вот стиль: 

.modal-backdrop.in+#wrapper {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

1 Ответ

0 голосов
/ 28 января 2019

Если я правильно понимаю, вы пытаетесь сделать то, что стоит за модальным, размытым.Чтобы получить этот эффект, вы можете попробовать один из следующих подходов:

Использование backdrop-filter

Это все еще экспериментальное свойство CSS ;это, однако, довольно просто, поскольку он применяет фильтр к тому, что находится за полупрозрачным элементом.Реализация этого метода будет выглядеть следующим образом: 

.modal-backdrop.in + #wrapper {
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);
}

Обратите внимание, что, поскольку он все еще экспериментален, его не следует использовать в производстве.

Стилизация самой страницы

С помощью JavaScript вы можете добавить класс к элементу #wrapper, например .modal-open, и затем соответствующим образом оформить его, более или менее так (не забывайте удалять фильтр из модального объекта, если он находится внутри оболочки):

JS 

const wrapper = document.getElementById('wrapper');

function openModal () {
    // ...
    wrapper.classList.add('modal-open');
}

function closeModal () {
    // ...
    wrapper.classList.remove('modal-open');
}

CSS 

#wrapper.modal-open {
    filter: blur(10px);
}

#modal {
    filter: none;
}
...