how do you do overlay under modal popup layer?

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: egami, macek, gesf

Post Reply
New php-forum User
New php-forum User
Posts: 28
Joined: Tue Jan 21, 2003 9:31 pm

Mon Jul 02, 2007 3:48 am

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.
[flash width=300 height=100 loop=true][/flash]

Administrator Newbieslair


Mon Dec 10, 2007 2:00 pm

First, set up your page like so-

Code: Select all

<div id=\\\"popup\\\">
<!-- Put your popup here -->
<!-- Leave the rest of your code the same. -->
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: Select all

#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-
Open Caffeine Editor, then go to Help -> About to see a dialog.

Post Reply