How To Do a CSS PopUp Without Opening a New Window
Friday, October 12th, 2007Categories: Web Development
RSS Comment Feed
Trackback
Ever wonder how some people can get little CSS PopUp’s without opening an annoying window? I’ll explain how. One of its advantages is that it’s not blocked by blockers and you can place it wherever you like on your page. Apart from the short Javascript file that you don’t even have to look at, it’s quite easy to understand.
Please note that whenever I speak about a blanket, I’m referring to the transparent film that goes over the content to draw attention to the PopUp.
The CSS
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
What this CSS does is position and style the general elements. The blanket, as discussed earlier, is the translucent color block placed over the content to bring out the popUp. popUpDiv is the name of our popUp div element. It’s important to know that both elements have their position attributes set to absolute. This means they are positioned at certain pixel measurements on your website relative to what object they’re in.
The Javascript File
Click Here To Download the CSSPopUp.js file. Now, the first thing you need to do, is download the Javascript file and put it in a folder you can remember. If you’re curious, open it up, I’ll give a brief overview of what each function does. (Keep in mind I am by no means a Javascript coder, it probably looks a little messy to some pros out there).
- toggle(div_id) - This simply toggles the inserted div name from being displayed (display:block) to being hidden (display:none).
- blanket_size(popUpDivVar) - This resizes the blanket to fit the height of the page because there is not height=100% attribute. This also centers the popUp vertically.
- window_pos(popUpDivVar) - This centers the popUp vertically.
- popup(windowname) - This function contains the other three to make life simple in the HTML file.
The HTML
<div id=”blanket” style=”display:none;”></div>
<div id=”popUpDiv” style=”display:none;”>
<a href=”#” onclick=”popup(’popUpDiv’)”>Click Me To Close</a>
</div>
<a href=”#” onclick=”popup(’popUpDiv’)”>Click Here To Open The Pop Up</a>
The HTML places two your two CSS elements with display being set to none by default. I’ve noticed this is important for some reason.
Using the attribute onclick in our <a> tags, we can call our function: popup(); to do everything we need. It turns the popUp both on and off.
That’s all for now, if you’re having some trouble, click Here For The Demo and feel free to go ahead and grab any code you like.
Related Posts
- Hundredth Post - Looking Back On The Blog
- When to Open Links in New Windows
- How To Send Data From Flash To ASP/PHP Without A Page Refresh
January 29th, 2008 at 8:40 am
Hi. Your script is great.
Q.1 Could you advise on how to change the dimensions of the popUpDiv so that it will sit int he top left of the window, on top of the blanket layer.
Q.2 Can the popUpDiv scroll?
Q3. Can one have links in the popUpDiv layer to internal webfiles?
Thank you in advance
January 29th, 2008 at 12:21 pm
Hi DD, thanks for the comment.
Here are your answers:
1.
JAVASCRIPT
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle(’blanket’);
toggle(windowname);
}
change to
function popup(windowname) {
toggle(’blanket’);
toggle(windowname);
}
CSS
add this to popupDiv
top:0px;
left:0px;
2. The Div can be as long or as short as you want. If you’re looking to have a scrollbar, you’d have to use an iframe.
3. Absolutely. The CSS Popup isn’t actually a popup, it’s a CSS element that feels like one.
Wish you the best, let me know if you have any more questions.
February 2nd, 2008 at 1:24 pm
Hi there! Thanks you for sharing.
I have one question:
In the html that I’m using the CSS popup I need to use a flash banner. The thing is that the blanket doesn’t goes over the flash. So I get the Popup and the flash’s area over the blanket ay the same time.
Is there a solution for this?
Thanks again
February 3rd, 2008 at 1:59 pm
martin, the only solution (to my knowledge) would be to use javascript to swap the innerHTML of a div with the Flash to an image before laying the blanket over. Flash seems to always want to be on top.
March 16th, 2008 at 12:12 pm
Hi There! Great Tut.
One thing: huge images (1000px or above wide for example) doesn`t show up on the center of website, but little on the right. What should i change to set them absolutly center to width of the window?
March 16th, 2008 at 12:22 pm
Hi Drev,
Thanks for the comment. I would not have 1000px pictures because people with the common resolution of 1024×768 would have a side scrollbar (over ~980px is a bad idea)
But if you’re set on doing this, there’s this line:
—–
window_width=window_width/2-150;//150 is half popup’s width
—–
Did you change 150 to 500?
March 16th, 2008 at 12:45 pm
God damn it! That was a fast reply
But no, it doesnt work:(
Sorry that i will paste link, but its a good example: http://www.starcraft2.com/features/zerg/mutalisk.xml
(click on whatever thumbnails). All of them appears at center of the window. With your script, images are on the right, like it set them according to the first pixel of an image, not from middle (?).
March 16th, 2008 at 2:19 pm
Could you throw me a link with your page? patrick_burt@hotmail.com
March 17th, 2008 at 1:49 pm
Hi Patrick, i sent Email to You yesterday, but You didnt respond, maybe junkmail?
March 17th, 2008 at 2:29 pm
I downloaded the site to my computer. I changed two lines and it worked:
popUpDiv_height=blanket_height/2-291;//150 is half popup’s height
window_width=window_width/2-550;//150 is half popup’s width
Hope that helps.
(And yeah, it was in my junk mail)
March 23rd, 2008 at 7:06 pm
Hello. I tried to add it onto my page, but I get a “blanket has no properties” error message in firefox and an “object required” error message in IE7..
How do I get it to find blanket?
Thanks!
March 24th, 2008 at 9:25 am
Hi Chris, thanks for the comment.
Did you make sure that
is on the page? Did you also make sure that you set the ID as blanket, and not the class?
March 24th, 2008 at 9:32 pm
Yeaa.. i figured it out..
I was lazy and copy and pasted your html portion onto my page.. when I did it, the quotes came out as a different character.. They are (”) when I copied it and they are supposed to be (”).. So that’s what threw it off..
oh yea.. and I’ve been looking for a way to do this for a little while and I couldn’t find and tutorials on it. This helped a lot!
Thanks!
March 24th, 2008 at 9:33 pm
Ah cheers, glad to hear everything worked out.
April 1st, 2008 at 1:10 am
hey there,
This is a great function by the way. But I’m having an issue in IE6. The blanket div seems to be outside of the popup div. It works great in IE7, FF and Safari, but IE6 looks screwy. It’s showing up to the left of the popup div. Do you have any ideas around this?
thank you.
April 1st, 2008 at 9:08 am
Hi Ted,
Could you send me a link to the page?
April 9th, 2008 at 1:35 am
Hi There,
Very nice css popup. I was wondering if there is a way to make this popup on entering a webpage rather than having to click on a link for it to popup.
Thanks
April 9th, 2008 at 8:15 am
Hi Dustin,
Simply remove the display:none from the DIV containers.
You can always use something like scriptaculous for a fade-in effect if you like. 
April 14th, 2008 at 12:27 pm
is there anyway to load one of these popups automatically? for example, when you go to the home page there will be a popup video that will play… they should be able to close the popup and when the video stops it should close. any ideas?
April 14th, 2008 at 1:16 pm
Hi Rich,
Simply remove the display:none from the DIV containers (blanket and popup)
April 15th, 2008 at 8:18 pm
Hi, I’m using Visual Studio 2008, but I work in an office where they only have Windows 2k servers so I’m stuck using .net 2.0. What I am seeing in VS 2008 an error for
opacity: 0.65;
filter:alpha(opacity=65);
It says CSS 2.1 does not contain those properties or recognize those properties… Please tell me that it’s VS… If I launched it would it work anyway I guess is what I’m asking.
April 15th, 2008 at 8:21 pm
Hi Jaime,
It wouldn’t validate, but it would work. Filter=IE, Opacity = everything else. I’d suggest opening the file in Notepad, adding it, and then oepning it up in VS2008.
May 2nd, 2008 at 10:19 am
Hi there, I think your pop up is great - I’ve been wondering how to achieve this for a while now! Just one question, is it possible to have more than one on a page? For instance, 10 links with 10 different pop ups.
Thank you.
May 2nd, 2008 at 10:41 am
Hi Charlotte,
Absolutely. There’s two ways you can do this: Have multiple uniquely ID’ed CSS containers with different or use one CSS container and use Javascript to switch up the content.
May 2nd, 2008 at 12:30 pm
Great, I’ll try the uniquely ID’ed CC containers. Thanks for your help!
May 6th, 2008 at 5:07 pm
very impressed with your program, pariculary its simplicity and size.
am using iframes to display PDF files, and your program works great in IE7. In FF, however, the popup window opens nicely, but the PDF does not display. Any ideas on correcting this?
May 6th, 2008 at 8:14 pm
Hi zaydeh. That seems to me like something that would be impossible, given that this is a browser issue.
This is an area I’m unfamiliar with, but what about toying with Macromedia Flash Paper? You could convert the PDF to a compatible format, and throw the Flash code on your popup?
May 12th, 2008 at 1:39 am
Thank you very much for the script! I’m not very fluent in javascript, but this code was simple to use and I actually learned alot from this script. I didn’t think my javascript image gallery would work inside the div tags, but it works flawlessly!
My only question is if its possible to add a fade effect for both the blanket and pop up window on open and close.
Also, is it possible to have more than one link on the same page open up a different window?
The site is a kitchen design website, and one link is for photos, the other is cad drawings. So the will both contain different material. Only way I know to do it is to rename the “popUpDiv” to “popUpDiv2″ and that would require a whole new “csspopup.js” for the different variable name.
Thanks again, very simple to use!
May 12th, 2008 at 2:08 am
Looks like I spoke too soon.
The pop up works flawlessly with firefox… but unfortunately there are people who still use IE out there. Hard to believe, I know… but I guess some just don’t know of the beauty that is firefox
The problem in IE is the blanket does not cover the page, but shifts everything over half the page…
Do you mind taking a look at the source and telling me what’s wrong?
http://www.lentzdesignsinc.com
Try it in IE.
Thanks Patrick!!!
May 12th, 2008 at 10:39 pm
Hi Jonathan,
For the second comment, the bit that says: “div id=”blanket” style=”display:none”, etc. should not be in a table cell. But instead, it should be called right after your BODY tag.
For different popups, you’d have to have a different ID name, the link would just call the different name, for example:
div id=”lentzPopUp” and then the link: onclick=”popup(’lentzPopUp’)”
May 13th, 2008 at 2:58 am
Cool!
Thanks for the quick reply.
If I may bother you for one more question:
I now have two different popups working on the same page (four actually), however I’m having a hard time figuring out how to get another that is larger to center.
In csspopup.js I’m defining the position, however the variable is “popUpDiv”
Seeing as how I have more than one popup, one id is “Photos” and one is “TwentyTwenty”
Not thinking about it, I never changed the line in csspopup.js from:
popUpDiv_height=blanket_height/2-210; // half the popup height
To:
Photos_height=blanket_height/2-210; // half the popup height
I thought since I changed the div ID that I would have to, but it worked flawlessly.
Well, that’s fine considering it’s popup height is infact 420… however another popup’s size is 656 x 465
Do I just add another line stating:
TwentyTwenty_height=blanket_height/2-328; // half the popup height
May 13th, 2008 at 5:24 am
Hi
This is great but I have a problem in FF where when I close with a button on the page it causes the underlying page to reload. It does not do this in IE 6.
I am using Close to close.
i have put an alert on the page body onload so I can confirm it happens.
– ewan
May 13th, 2008 at 5:25 am
sorry that should be
“when I close with a button on the popup it causes the underlying page to reload. It does not do this in IE 6.”
May 13th, 2008 at 8:25 am
Jonathan, you’d have to jump in and get your hands dirty with some Javascript, maybe put a toggle in the function?
Ewan, got a link? This isn’t normal.
May 13th, 2008 at 9:13 am
Sorry no link as it is not internet facing
It does not do a reload on your demo page so there is something else I have that is calling the page to be reloaded. Its pretty odd as IE does not do it. Worse than that it ends up hitting the database.
The page that the div pop up is on is in a frame - is it possible that drawing over the whole window causes the frameset to have its children reload?
May 13th, 2008 at 10:13 am
Right may have narrowed the prblem down to the buttons - they seem to cause the reload.
My popup div has 4 buttons at the bottom each one performing some javascript action before calling popup(’popupDiv’) and all four cause the reload in FF. Change the buttons to links with onclick() handles and the reload does not happen.
Close
replaced with Close.
Doh - the solution for buttons in FF is have the onclick() return false which i suppose I should have known but as it was not a form I assumed I did not need it.
Close
May 13th, 2008 at 10:14 am
sigh - html is being stripped in the above reply.
May 14th, 2008 at 8:13 am
Ahhh, sounds good. Thanks for the tip ewan.
May 27th, 2008 at 1:50 pm
I am trying to get your code to work on a site that I am working on, but I am obviously doing something wrong. Can you please help?
May 27th, 2008 at 3:15 pm
Hi Lynda,
Can you post a link to the site in question?
May 27th, 2008 at 4:45 pm
http://tagcreations.net/tag.html
sorry i thought it put it up since it asked for it.
May 28th, 2008 at 8:52 pm
Hi Lynda, your blanket should come right after your body tag.:)
June 3rd, 2008 at 2:12 pm
Hi Patrick,
Thanks for the code, it’s really spiffy! I also don’t have much javascript background and this was something really cool I happened to stumble on that I could actually implement. I was wondering the same thing as Charlotte, but after trying to use new ids (blanket01, popUpDiv01, etc), the popup no longer pops up. Is there something in the javascript I should change as well? (And make 01, 02, 03, etc versions of…???)
June 4th, 2008 at 9:06 am
Hi Meg, blanket won’t need to change. All you would have to do is replace instances of “popUpDiv”
June 6th, 2008 at 11:28 am
Can you tell me how to have the popup appear in the center of the window. Currently the popup appears in the center of the page. This doesn’t work so well because my page is long and the popup appears too far down.
June 6th, 2008 at 3:10 pm
Hi Paul, in the JS file, you can adjust the height of your box. This may be the problem.
June 8th, 2008 at 6:24 am
Hi Paul, I’ve done a multipopup version that works great in IE, okish in Firefox (but I just noticed I need to extend the popup boxes) but doesnt work as it should in Safari - the popup text appears in the same place as where the original link is and the box cant be closed (I guess because the blanket is over top).
Do you have any suggestions for getting it to work in Safari (3.1.1) - screenshot of the safari problem is at www.worklife.co.nz/gvopen.jpg
June 8th, 2008 at 6:25 am
whoops, did I say Paul? I meant Patrick
June 8th, 2008 at 10:12 am
It’s okay.
What happens if you start throwing on high z-order attributes on the popup divs?
June 8th, 2008 at 3:07 pm
High as in what, Patrick - not sure how high you want me to try. (its not me with Safari but a friend of mine so its not that easy to test lots of things)
As an aside I did have this problem myself in IE when I first tried it and had the CSS ID declarations as totally separate instances eg.
#popUpDiv { blah}
#popUpDivHow {blah} etc
but this was fixed when I set them as one combined declaration eg
#popUpDiv, #popUpDivHow {blah}
not sure why.
June 8th, 2008 at 9:43 pm
High as in the highest number on the page.
One thing you might want to consider is placing the code for the DIV right after the blanket.
June 11th, 2008 at 5:27 am
Hi there!
Thanks for the great script - has worked wonders for me! However, the pop seems to be appearing in the middle of the page, not the browser window. For example on a really long page, the pop up won’t be seen without scrolling down. Do you know if there is anyway way to fix this at all?
Many Thanks!
June 11th, 2008 at 5:35 am
Following on from my last comment, a way to position the box in the midle of the page and then define xxx pixels from the top would also be fine?
Many Thanks!
June 12th, 2008 at 12:43 pm
Hi again, Patrick — thanks for the tip! I’ve duplicated the popUpDiv01 within the head to create popupDiv02, and in the body I have something like:
Click Me To Close
Click Me To Close
The first thumbnail works properly, but when the second is clicked, the large image appears (seemingly under the blanket??) and pushes the three other thumbnails down the page. The “click to close” is unclickable. I noted that this only occured when I had two popUpDiv’s specified in the head, no matter what it was named. If I only had 02 up there, and only called 02 in the body, it’d still work…
I’m not sure about the implications of such an observation, but I was hoping you could provide some enlightment! Thanks so, so much, and I apologize for any noob-ish confusion on my part x_x!
June 12th, 2008 at 12:45 pm
Oh…I didn’t realize the html would work. Sorry!
Click Me To Close
Click Me To Close
–>
June 13th, 2008 at 8:27 am
Do you have a link to the site in question Meg? The HTML isn’t coming through.
July 3rd, 2008 at 7:23 pm
Maybe I’m just missing something obvious, but in IE6, any image I place in the popup div doesn’t appear–only text.
Is this an expected behavior?
July 3rd, 2008 at 9:55 pm
Hi Jeff,
Place the div id=”blanket” and popups right after the body tag.
July 7th, 2008 at 5:06 am
Hi Patrick,
Thank you very much for the nice CSS popup. this i was searching since somany days i dint find the good one. but this helped me allot. if you dont mind i used this in one of my sites.
Many thanks
July 7th, 2008 at 8:17 am
Hi Neeta, my pleasure. Glad it worked out for ya.
July 7th, 2008 at 11:18 am
Thanks for the response.
(Looks like the problem is actually some sort of conflict with the sleight.js png replacement script for IE. The images work just fine as long as the aren’t .png format.)
Thanks for the cool popup solution.
July 12th, 2008 at 8:16 pm
I used the code to create a popup menu. I added negative values margin-left and margin-top to position the menu. Works perfect in FF and Opera. IE (6 & 7) however, are a different story.
Page is here:
http://library.hsc.usf.edu/home.php
Perhaps I should nix the margin-left/margin-top and change position in the javascript, but I’m not a javascript expert either.
Any advice?
July 13th, 2008 at 1:04 am
Have you tried absolute positioning John? Margins combined with widths/heights are always a little iffy.
July 15th, 2008 at 5:10 am
Hi Patrick,
Thanks for the response. hope you remember me
I have one problem in my site. hope you can help me out with this.
This is the site where i used you csspopup to show one flash and one secured page in the popup. i am not a very good designer, please dont mind when you see the site.
http://www.engage-technologies.com
The problem is i have a small flash on the index page. popup is properly opening on the flash, if the browser is reduced to small size and when i click on the link “click to call us” it opens the popup and if i try to scroll to see the full popup, the popup flickers with the flash behind. this behaviour in IE and in firefox flash is overlaping the popup.
Can you please tell me some solution for it.
Thanks
Neeta
July 15th, 2008 at 9:57 am
Hi Neeta,
There are issues with Flash always wanting to be on the highest layer of your website. Unless there’s a workaround I don’t know, the thing I’ve done before is swap the Flash out for an image before putting a popup on top.
July 15th, 2008 at 2:32 pm
Thank you for the reply Patrick!!
July 16th, 2008 at 12:04 pm
Hi, Patrick:
I am currently designing my personal site right now. After reading some articles regarding accessibility, finding your script is a god sent. However, I am still a beginner to the web world. Please excuse my ignorance. Can you please let me know how I can add a swf into the popUpDiv?
I’ve been scratching my head till that point. Hope you can help me.
Vic
July 16th, 2008 at 1:06 pm
Hi Vic,
The best I can do without giving you a lesson JAvascript is to redirect you to SWFObject. What you need to do is swap in the Flash when the DIV container flips on.
http://code.google.com/p/swfobject/
July 18th, 2008 at 7:11 pm
Hi Patrick,
First off, thanks so much for posting this (I went looking for this very solution and this is nearly perfect for what I’m trying to do), and for being so helpful to all of us rookies.
This setup works beautifully for the site I’m working on ( http://angledend.com/clients/mse/variety_bands_orchestras.html , click on “JG Band” to use the script) with one exception: it seems to be limited to one such pop-up link per page. As you can see, I need to use it for several such links/popups on a single page. Are you aware of a simple way to do this without creating a separate JScript for every link? I gathered that Meg might be doing something similar, but I wasn’t quite following the suggested solution.
Also, one tweak that you might find helpful: I placed a transparent GIF in the blanket DIV with 100% dimensions, then placed another toggle link around that. So now you can click anywhere outside the popup in order to get rid of it. Much quicker than finding a small link with your mouse.
July 19th, 2008 at 4:37 pm
You woudln’t need another Javascript file. All you would need is another uniquely named DIV ID and to change the popupDiv to that new name. What you could even do is use CLASSES to style the box, and ID’s only to uniquely tag the DIV container to open/close it, know what I mean?
Good idea for the tweak!
July 19th, 2008 at 4:42 pm
Okay, let me give that some thought. I got the idea that the phrase ‘popUpDiv’ had to be used as the DIV ID because it’s referenced so many times in the code (I tried replacing that in the HTML with a new name, which didn’t work). There must be something I’m missing in the logic there.
Thanks for the response!
July 21st, 2008 at 4:07 pm
A-HA! Took me a few minutes, but I figured it out. Thanks again!
July 21st, 2008 at 4:10 pm
No problem Whit.
July 22nd, 2008 at 11:08 am
Hello Patrick!
The way this works is awesome but I was wondering does it
automatically resize the pop-up window to fit the say an image?
It would be nice if it did. If you wouldn’t mind showing me how
to go about doing this it would really be helpful!
Thanks!
Nathan
July 22nd, 2008 at 11:36 am
You mean to constantly be resize depending on whatever’s in it? That would take a fair bit of Javascript Nathan.
If you want to change the size of the pop-up window in general (and not have it resize dynamically based on the content). You can do that in the CSS and on two lines in the Javascript.
July 22nd, 2008 at 11:41 am
Yeah that is what I mean
Did not realize it would take that much sorry :). The images I am using are of various sizes so I would want it to dynamically resize them but since that may be to difficult I may stick with what I already have. Here is a link to what I have done (remember I only did the images, the text, and the pop-ups. It is an old site I am trying to revamp and convince the company to redesign). TNJMurray
July 22nd, 2008 at 11:44 am
Nathan, that would take some serious Javascripting. Or a different solution all together. If being time-efficient is your thing, I’d consider cropping that last picture, or shrinking it to the height of the others.
July 22nd, 2008 at 11:55 am
Would there be any way that I could set a separate size for the other image? They don’t want to lose any of the picture
Thanks!
July 22nd, 2008 at 1:17 pm
Hi Nathan,
Unfortunately for the example Javascript and CSS I provided, I made things as simple as can be so that it’s easy to use. The separate sizing would mean a decent amount of Javascript and tinkering.
July 22nd, 2008 at 1:56 pm
No problem thanks for your help. BTW I love your site! It is great! I am trying to learn how to use css and other design elements for the computer and your site is really helpful!
Thanks again!
Nathan