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

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

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;
}

<div id = "popup">
  <label for = "txtName">UserName:</label>
  <input type = "text" id = "txtName" class = "form-control mb-2">
  <label for = "txtAddress">Address:</label>
  <input type = "text" id = "txtAddress" class = "form-control mb-2">
  <label for = "txtPhone">Phone Number:</label>
  <input type = "text" id = "txtPhone" class = "form-control mb-4">
  <button id = "btnSave" class = "btn btn-primary btn-block">Save</button>
  <button href = "" class = "close-btn" onclick = "toggle()">&times;</button>
</div>
<a class = "primary-btn order-submit" style = "cursor : pointer" onclick = "toggle()" id = "btnOpenPopup">Add New Address</a>

Blur element:

    <div class = "container" id = "blur">
    <div id = "overlay"></div>
        <h1>@ViewData["Title"]</h1>
        <p class = "text-success">@ViewData["StatusMessage"]</p>

        <div class = "row">
            <div class = "col-md-6">
                <h4>Cập nhật thông tin tài khoản</h4>
                <hr />
                <dl class = "row">
                    <dt class = "col-sm-4">
                    Profile Detail:
@*                     <md-card-content>
                        <div class = "user text-center">
                            <img src = "https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt = "user avatar" class = "user-avatar" />
                            <md-button class = "md-icon-button user-avatar-edit" ng-click = "browserAvatar()">
                                <md-icon class = "text-center">photo_camera</md-icon>
                            </md-button>
                        </div>
                    </md-card-content> *@
                </dt>
                  
                    <dd class = "col-sm-8">
                        <dl class = "row">
                            <dt class = "col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
                        <dd class = "col-sm-6">
                            @if (Model.profile.UserName == null)
                            {
                                <span class = "empty-italic">empty</span>
                            }
                            else
                            {
                                <span>@Model.profile.UserName</span>
                            }
                        </dd>
                        </dl>
                        <dl class = "row">
                            <dt class = "col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
                            <dd class = "col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
                        </dl>
                        <dl class = "row">
                            <dt class = "col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
                        <dd class = "col-sm-6">
                            @if (Model.profile.PhoneNumber == null)
                            {
                                <span class = "empty-italic">empty</span>
                            }
                            else
                            {
                                <span>@Model.profile.PhoneNumber</span>
                            }
                        </dd>
                        </dl>
                        <dl class = "row">
                            <dt class = "col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
                        <dd class = "col-sm-6">
                            @if (Model.profile.HomeAdress == null)
                            {
                                <span class = "empty-italic">empty</span>
                            }
                            else
                            {
                                <span>@Model.profile.HomeAdress</span>
                            }
                        </dd>
                        </dl>
                        <dl class = "row">
                            <dt class = "col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
                        <dd class = "col-sm-6">
                            @if (Model.profile.BirthDate == null)
                            {
                                <span class = "empty-italic">empty</span>
                            }
                            else
                            {
                                <span>@Model.profile.BirthDate</span>
                            }
                        </dd>
                        </dl>
                        <a asp-action = "EditProfile" class = "btn btn-primary btn-sm">Edit</a>
                    </dd>
                </dl>

                <dl class = "row">
                    <dt class = "col-sm-4">Mật khẩu:</dt>
                    <dd class = "col-sm-8">
                        @if (Model.HasPassword)
                        {
                            <a asp-controller = "Manage" asp-action = "ChangePassword" class = "btn btn-sm btn-primary">Đổi mật khẩu</a>
                        }
                        else
                        {
                            <a asp-controller = "Manage" asp-action = "SetPassword" class = "btn btn-sm btn-success">Tạo mật khẩu</a>
                        }
                    </dd>
                </dl>

                <dl class = "row">
                    <dt class = "col-sm-4">Liên kết tài khoản ngoài:</dt>
                    <dd class = "col-sm-8">
                        Có @Model.Logins.Count liên kết. <a asp-controller = "Manage" asp-action = "ManageLogins" class = "btn btn-sm btn-info">Quản lý liên kết ngoài</a>
                    </dd>
                </dl>

                <dl class = "row">
                    <dt class = "col-sm-4">Số điện thoại:</dt>
                    <dd class = "col-sm-8">
                        <p>
                            Số điện thoại dùng để xác thực hai yếu tố
                        </p>
                        @(Model.PhoneNumber ?? "không có")
                        @if (Model.PhoneNumber != null)
                        {
                            <text>:</text>
                            <a asp-controller = "Manage" asp-action = "AddPhoneNumber" class = "btn btn-sm btn-warning">Thay đổi</a>
                            <form asp-controller = "Manage" asp-action = "RemovePhoneNumber" method = "post" role = "form">
                                <button type = "submit" class = "btn btn-danger btn-sm">Loại bỏ số điện thoại</button>
                            </form>
                        }
                        else
                        {
                            <a asp-controller = "Manage" asp-action = "AddPhoneNumber" class = "btn btn-sm btn-success">Thêm số điện thoại</a>
                        }
                    </dd>
                </dl>

                <dl class = "row">
                    <dt class = "col-sm-4">Xác thực hai yếu tố:</dt>
                    <dd class = "col-sm-8">
                        @if (Model.TwoFactor)
                        {
                            <form asp-controller = "Manage" asp-action = "DisableTwoFactorAuthentication" method = "post" class = "form-horizontal" role = "form">
                                (Đang kích hoạt) <button type = "submit" class = "btn btn-danger btn-sm">Hủy</button>
                            </form>
                        }
                        else
                        {
                            <form asp-controller = "Manage" asp-action = "EnableTwoFactorAuthentication" method = "post" class = "form-horizontal" role = "form">
                                <button type = "submit" class = "btn btn-primary btn-sm">Kích hoạt</button>
                            </form>
                        }
                    </dd>
                </dl>

                <dl class = "row">
                    <dt class = "col-sm-4">Xác thực ứng dụng:</dt>
                    <dd class = "col-sm-8">
                        @if (Model.AuthenticatorKey == null)
                        {
                            <form asp-controller = "Manage" asp-action = "ResetAuthenticatorKey" method = "post" class = "form-horizontal" role = "form">
                                <button type = "submit" class = "btn btn-sm btn-primary">Phát sinh mã</button>
                            </form>
                        }
                        else
                        {
                            <p>Mã xác thực là: @Model.AuthenticatorKey</p>
                            <p>Nhập mã này khi yêu cầu xác thực 2 yếu tố</p>
                            <form asp-controller = "Manage" asp-action = "GenerateRecoveryCode" method = "post" class = "form-horizontal" role = "form">
                                <button type = "submit" class = "btn btn-sm btn-primary">Phát sinh mã phục hồi</button>
                            </form>
                        }
                    </dd>
                </dl>

            </div>
        <!-- Order Details -->
        <div class = "col-md-5 order-details mt-lg-5" style = "margin-left:90px;">

        
            <div class = "section-title text-center">
                <h3 class = "title">Sổ Địa Chỉ</h3>
            </div>
            <div class = "order-summary">

                <div class = "order-col">
                    <div><strong>PRODUCT</strong></div>
                    <div><strong>TOTAL</strong></div>
                </div>
                <div class = "order-products">
                </div>
                <div class = "order-col">
                    <div>Shiping</div>
                    <div><strong>FREE</strong></div>
                </div>
                <style>
                    #total {
                        white-space: nowrap; /* Ngăn chặn xuống dòng */
                    }
                </style>
                <div class = "order-col">

                    <div><strong>DISCOUNT</strong></div>
                    <div><strong class = "discount-total">0 VND</strong></div>

                </div>
                <div class = "order-col">


                    <div><strong>TOTAL</strong></div>

                </div>
            </div>
            <div class = "input-checkbox" style = "margin-top : 5px">
                <input type = "checkbox" id = "terms">
                <label for = "terms">
                    <span></span>
                    I've read and accept the <a href = "#">terms & conditions</a>
                </label>
            </div>
            <a class = "primary-btn order-submit" style = "cursor : pointer" onclick = "toggle()" id = "btnOpenPopup">Add New Address</a>
        </div>
        <!-- /Order Details -->
        </div>
    </div>

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

Можете ли вы добавить в свой код элемент «размытие»? Из предоставленного кода неясно, в чем проблема. Попробуйте добавить элемент размытия, чтобы фрагмент кода воспроизводил проблему.

— 05.05.2024 19:15

javascript html css frontend

05.05.2024 17:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body {
  font: normal normal 14px/1.4 Roboto, sans-serif;
}

#btnOpenPopup {
  display: block;
  background-color: white;
  padding: 10px;
  margin: 20px 10px;
  width: min-content;
  white-space: nowrap;
}

.container#blur {
  background-image: url(https://picsum.photos/800/600);
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  inset: -40px;
  z-index: -10;
}

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

#popup {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

#popup label {
  font-size: 90%;
  font-weight: 600;
  margin-top: 1em;
}

#popup input {
  padding: 5px;
  border: 1px solid #D5D5D5;
}

#btnSave {
  margin-top: 2em;
  font: inherit;
  color: white;
  background-color: #337AB7;
  border: none;
  border-radius: 3px;
  padding: 5px;
}

#btnSave:hover {
  background-color: #08d;
}

#btnOpenPopup {
  border-radius: 3px;
}

#btnOpenPopup:hover {
  color: white;
  background-color: #08d;
}

#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;
}

<div class = "container" id = "blur">
</div>
<div id = "popup">
  <label for = "txtName">UserName:</label>
  <input type = "text" id = "txtName" class = "form-control mb-2">
  <label for = "txtAddress">Address:</label>
  <input type = "text" id = "txtAddress" class = "form-control mb-2">
  <label for = "txtPhone">Phone Number:</label>
  <input type = "text" id = "txtPhone" class = "form-control mb-4">
  <button id = "btnSave" class = "btn btn-primary btn-block">Save</button>
  <button href = "" class = "close-btn" onclick = "toggle()">&times;</button>
</div>

<a class = "primary-btn order-submit" style = "cursor : pointer" onclick = "toggle()" id = "btnOpenPopup">Add New Address</a>

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

— 06.05.2024 07:29

Могу ли я спросить, что отличается от моего кода? или какие-либо элементы, которые вы просто добавляете?

— 06.05.2024 11:50

@Джон Разница в </div> во 2-й строке. Это означает, что контейнер НЕ ДОЛЖЕН ничего содержать, потому что вы собираетесь сделать его (и по определению все, что он содержит) прозрачным. Чтобы избежать прозрачности всплывающего окна, не делайте его дочерним элементом контейнера. (Я также предлагаю назвать контейнер другим именем, например popup-overlay, потому что странно, что контейнер ничего не содержит)

— 06.05.2024 12:17

05.05.2024 20:00