Как предотвратить влияние всплывающих карточек на цвет других карточек при размытии ⇐ CSS

[Anonymous]

Я создаю всплывающее окно с размытым фоном, вот так

Как вы можете видеть всплывающая карточка страдает от других цветов внутри карточки. Я хочу, чтобы всплывающий тег был белым и отделялся от фона. Вот мой код:

Код: Выделить всё

function toggle() {
var blur = document.getElementById('blur');
blur.classList.toggle('active')
var popup = document.getElementById('popup');
popup.classList.toggle('active')
}

Код: Выделить всё

.container#blur.active {
filter: blur(20px);
pointer-events: none;
user-select: none;
}

#popup {
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -20%);
width: 600px;
padding: 50px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
background: #fff;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}

#popup .close-btn {
position: absolute;
top: 1px;
right: 10px;
height: 20px;
background: #fff;
color: #111;
border: none;
outline: none;
}

#popup.active {
visibility: visible;
opacity: 1;
transition: 0.5s;
}

Код: Выделить всё

UserName:

Address:

Phone Number:

Save
×

Add New Address

Я замечаю, что когда я прокручиваю всплывающее окно до нижнего колонтитула, тег всплывающего окна поворачивается. быть таким img. Кажется, что всплывающее окно прозрачно. Есть ли способ улучшить его? Спасибо за помощь

Подробнее здесь: https://stackoverflow.com/questions/784 ... en-blurred