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.
TheIceman5
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
<html>
<body>
<div id=\\\"popup\\\">
<!-- Put your popup here -->
</div>
<!-- Leave the rest of your code the same. -->
</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: 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-
http://opmstech.org/t_k/caffeine/
Open Caffeine Editor, then go to Help -> About to see a dialog.
thetechgeek
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 2 guests

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