Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML CSS

how do you do overlay under modal popup layer?

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

Moderators: macek, egami, gesf

how do you do overlay under modal popup layer?

Postby TheIceman5 » 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.
New php-forum User
New php-forum User
Posts: 28
Joined: Tue Jan 21, 2003 9:31 pm

Re: how do you do overlay under modal popup layer?

Postby thetechgeek » 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.
New php-forum User
New php-forum User
Posts: 5
Joined: Mon Dec 10, 2007 1:43 pm

Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.