1

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.

Khush
  • 817
  • 1
  • 18
  • 46
  • Please [don't add signatures or taglines to your posts](http://stackoverflow.com/faq#signatures). – meager Jan 11 '12 at 04:15

5 Answers5

1
<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>
Bipin Chandra Tripathi
  • 2,472
  • 3
  • 24
  • 43
  • Thanks a lot. IT worked as desired except for the fact that when "position:absolute" then even a close button inside the pop up doesn close the pop up window and when its "relative" any button outside is active. Any ideas on how to handle that? – Khush Jan 11 '12 at 06:06
  • hide the main container id="popup" or if this didnt work hide the children of id="popup" and then surely it will work – Bipin Chandra Tripathi Jan 11 '12 at 06:34
0

Consider using a jquery plugin such as jQuery Tool's overlay.

kamchatka
  • 127
  • 1
  • 2
  • 6
0

You just have to put a div above everthing with position absolute and its z-index to something high like 9999.

you can take a look here http://www.w3schools.com/cssref/pr_pos_z-index.asp or use some plugin as mentioned by kamchatka.

Diego Garcia
  • 1,026
  • 1
  • 11
  • 24
0

If you are looking to develop for IOS as you mentioned in one of your comments, you could check out JQuery Mobile.

flynfish
  • 5,859
  • 3
  • 22
  • 33
  • jquery mobile has its own css. on using their css, it nullifies the css we use. Hence we decided to stick to pure javascript. – Khush Jan 11 '12 at 04:29
  • @Khush I don't understand, you should be able to override their CSS with your custom css... – flynfish Jan 11 '12 at 04:49
  • No, it doesn. The jquery-css over rides our app css, plus, the jquery code doesn fit in well with the ios development code for the same. we develop cross platform applications where the same code works for android and IOS. – Khush Jan 11 '12 at 05:18
0

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

Community
  • 1
  • 1
Asa Baylus
  • 43
  • 4
  • Can you tell me how to disable the background and create a modal lightbox? That would be a good start for me. – Khush Jan 11 '12 at 04:56