Issue
When you click on Forgot your password? Press me a popup window opens. When it opens, I want the background to be blurred. I tried to use filter: blur(20px); but that blurs the window itself which I don't want.
let forgotField = document.getElementById('field');
let forgot = document.getElementById('forgot');
forgot.addEventListener('click', () => {
forgotField.style.display = 'block';
});#field {
display: none;
position: absolute;
top: 80px;
right:0;
left:0;
margin: auto;
width: 300px;
}
#content {
background-color: black;
padding: 40px;
color: white;
}
#forgot {
color: black;
}<body id="login-section">
<section>
<a id="forgot">Forgot your password? Press me</a>
</section>
<div id="field">
<div id="content">
<p>Here you can set your password back</p>
</div>
</div>
</body>Solution
You just have to set the blur filter on an element that is a parent of the rest of the page, but not of your popup. Here I added <div id="blurme">...</div>, with the main page content inside, as a sibling to the #field popup element.
let forgotField = document.getElementById('field');
let forgot = document.getElementById('forgot');
let blurElement = document.getElementById("blurme")
forgot.addEventListener('click', () => {
forgotField.style.display = 'block';
blurElement.style.filter = "blur(5px)"
});#field {
display: none;
position: absolute;
top: 80px;
right: 0;
left: 0;
margin: auto;
width: 300px;
}
#content {
background-color: black;
padding: 40px;
color: white;
}
#forgot {
color: black;
}<body>
<div id="blurme">
<section>
<a id="forgot">Forgot your password? Press me</a>
</section>
</div>
<div id="field">
<div id="content">
<p>Here you can set your password back</p>
</div>
</div>
</body>Answered By - smallpepperz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.