Question

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.

Answer 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>