I create a Popup like with blurred background like this
As you can see the popup card is suffering from other colors inside the card. I want the popup tag to be white and separated from the background. Here my code :
<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>
<style>
.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;
}
</style>
<script type="text/javascript">
function toggle() {
var blur = document.getElementById('blur');
blur.classList.toggle('active')
var popup = document.getElementById('popup');
popup.classList.toggle('active')
}
</script>
I notice when I scroll down the popup to the footer the popup tag turn to be like this img . Its seem like the popup transparent. Is there any way I can improve it?. Thank for your help