如何防止弹出卡片模糊时影响其他卡片的颜色

Question

我创建了一个像这样背景模糊的弹出窗口 正如您所看到的，弹出卡受到卡内其他颜色的影响。我希望弹出标签为白色并与背景分开。这是我的代码：

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>

我注意到，当我将弹出窗口向下滚动到页脚时，弹出窗口标签变成这样的 img 。它看起来像弹出透明的。有什么办法可以改善吗？谢谢你的帮助

Answer 1

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>