我创建了一个像这样背景模糊的弹出窗口, 如您所见,弹出卡受到卡内其他颜色的影响。我希望弹出标签为白色并与背景分开。这是我的代码:
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()">×</button>
</div>
<a class="primary-btn order-submit" style="cursor : pointer" onclick="toggle()" id="btnOpenPopup">Add New Address</a>
我注意到当我将弹出窗口向下滚动到页脚时,弹出标签变成这样的img。它看起来像弹出透明的。有什么办法可以改善吗?感谢您的帮助