how do you do overlay under modal popup layer?

  • Thread starter Thread starter Anonymous
  • Start date Start date
A

Anonymous

Guest
i have a website where i have them layer type popups when you click on a link to open them and i want to make it modal. i have seen sites that have these and they have a semi transparent background blocking out the website and displaying the modal popup over the top so you cant interact with the site, only the popup.
how do i do that with my existing popups?? ive seen popup layers out there that do this but i dont want to change my entire site, i jsut want to add this overlay easily, how do i do it?? i cant work it out.
 
First, set up your page like so-

Code: 
<html>
<body>
<div id=\\\"popup\\\">

</div>

</body>
</html>

Second, open your favorite image editor (NOT PAINT!), preferably a powerful one such as The GIMP or Photoshop.
Create an image that\\\'s about 20x20 pixels.
Fill it up with about a 50% gray, and then make the color white transparent. (i\\\'m not sure how you\\\'d do it in Photoshop...)
Save it as \\\"popup_bg.png\\\" <-- HAS to be a png!
So now you have an image that\\\'s about 50% see-through.

Third, add this to your CSS-
Code: 
#popup {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(./popup_bg.png);
}

And try it out!

You can find an example here-
http://opmstech.org/t_k/caffeine/
Open Caffeine Editor, then go to Help -> About to see a dialog.
 
You must log in or register to reply here.
Back
Top