I would like to make a pop up that will appear immediately after loading the page. In addition, I want the background behind the black div to be blured, unfortunately after using filter = blur (8px) whole page is blured. Help…
window.onload = function main(){
document.body.style.backdropFilter="blur(5px)"
document.body.style.background="red"
const add = document.createElement('div')
const overall = document.createElement('div')
overall.style.width="100%"
overall.style.height="95vh"
overall.style.justifyContent="center"
overall.style.display="flex"
overall.style.alignItems="center"
overall.filter="blur(8px)"
overall.style.backgroundImage="url(https://www.hgsm.pl/wp-content/uploads/2017/03/Pattern-Blue-Dots-background-patterns-pattern-wallpapers-1920x1080.jpg)"
add.style.display="flex"
add.style.justifyContent="center"
add.style.alignItems="center"
add.style.width="300px"
add.style.height="400px"
add.style.background="black"
const element = document.createElement("img") ;
document.body.appendChild(overall)
overall.appendChild(add)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OptAd</title>
</head>
<body>
</body>
</html>Advertisement
Answer
- Use the
backdrop-filteron your overlay element (the one that fully covers the window) - Don’t forget to use position
fixedandz-index
window.onload = function main() {
const add = document.createElement('div')
const overall = document.createElement('div')
overall.style.cssText = `
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
`;
add.style.cssText = `
position: relative;
display: flex;
overflow: auto;
justify-content: center;
align-items: center;
width: 50vw;
height: 50vh;
background: white;
`;
add.textContent = "HELLO, WORLD?"
overall.appendChild(add);
document.body.appendChild(overall);
document.body.style.background = "red"
}<h1>This is some body text</h1>
If you want a more Class-y approach:
class Modal {
constructor(htmlContent) {
this.EL_overlay = document.createElement('div');
this.EL_content = document.createElement('div');
this.EL_content.innerHTML = htmlContent || "";
this.EL_overlay.append(this.EL_content);
this.EL_overlay.style.cssText = `
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
`;
this.EL_content.style.cssText = `
position: relative;
display: flex;
overflow: auto;
justify-content: center;
align-items: center;
width: 50vw;
height: 50vh;
background: #ddd;
`;
}
show() {
document.body.append(this.EL_overlay);
}
hide() {
this.EL_overlay.remove();
}
};
const myModal = new Modal("HELLO, <b>WORLD</b>?");
myModal.show();<h1>This is some body text</h1>