Reputation: 877

Pop up window using javascript and css

My app needs to generate a pop up window on button click. The app is specifically for mobile devices in android and IOS.

I have received the same using this code:

.popup
{
   position:absolute; left:0; top:0; width:132;
   border-style:solid;
   border-width:4;
   border-color:blue;
   background-color:black;
   padding:5px;
   color:white;
   font-family:Arial;
   font-weight:bold;
   font-size:10pt;
   z-index:2;
   visibility:hidden;
}

But what I need is for the background to be blurred and disabled while the pop up window is open. How do I achieve that?

The code being in JavaScript or CSS is fine with me.

Upvotes: 1

Answers (5)

Bipin Chandra Tripathi

Reputation: 2620

<div id="popup">
    <div style="position:absolute;width:100%;height:100%;z-index:9000;opacity:.5,background-color:#000;"></div>
    <div style="position:absolute;width:400px;height:400px;left:30%;top:20%;z-index:9001;">MY POPUP WINDOW</div>
</div>

Upvotes: 1

Asa Baylus

Reputation: 43

Disabling the background or creating a modal lightbox is pretty simple and covered in the other comments. Just be sure you set focus to new lightbox window or users using a screen reader will be lost.

Creating a blur is challenging. Webkit has introduced a CSS blur effect into their nightlies http://bit.ly/AuBZJO

I believe this is ultimately the solution. For now we can use RGBA to set the background div to be somewhat transparent as the other commenters noted.

Or you can tilt at windmills and hack together something using canvas to first do a screen capture

Can you take a "screenshot" of the page using Canvas?

Then blur the generated image

http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Upvotes: 0