Blured background behind the div
Question
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>
2 answers
solution1
1 2021-04-15 13:23:22
backdrop will do the trick
backdrop-filter: blur(2px);
solution2
1 ACCPTED 2021-04-15 13:24:02
- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS - Problem of blured div inside a blured div
Blured and transparent button background
Hide overflow behind stacked div with transparent background
It's possible to get background color behind div?
Hide element behind transparent div but not background
Hide elements behind transparent DIV but not background
Jquery add div with background behind text element
How to create a popup component with all background blured/disabled?
Unfixed/dynamic div shall blur the background image behind it
Is it possible to get the color behind a div thats placed on top of a background image?
Related Tags