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.
Alles wichtige zu Fliessbaender und Steigfoerederbaender erhalten Sie hier auf dieser Internetseite.
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 http://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
August 9th, 2008 at 1:34 pm
Hi, I have spent almost an entire day getting my personal website set up and running with your css and JavaScript files, and all looks great in Firefox. But in IE when I click on the box to hide the popUpDiv IE says Error on page, and does nothing. The opacity appears to have worked, clicking back takes me back two web pages. In Dreamweaver it says that opacity and filter are unsupported properties, is it crashing here, are there any alternatives (apart from telling everyone to use a decent browser
)
Thanks
Peter
August 9th, 2008 at 1:36 pm
Hi Peter, make sure the CSS elements I provided are located RIGHT after the body tag starts.
August 9th, 2008 at 1:53 pm
Wow what a quick reply! Tried your suggestion but it still does the same
….etc
August 9th, 2008 at 1:54 pm
Can you post a link to the site in question?
August 9th, 2008 at 1:58 pm
http://www.pjdphoto.co.uk
August 9th, 2008 at 2:01 pm
Hi Peter, I viewed source on your site. Bring the blanket and popup divs before your table’s code first starts.
August 11th, 2008 at 1:34 pm
Thanks Patrick, sorry to be a pain, but could you elaborate on that.
August 11th, 2008 at 1:41 pm
div id=”blanket” and div=”popupX”… all that body.. should be right after BODY which starts right after HEAD ends. (I can’t put greater than and smaller than’s because it messes up comments)
I’m talking about HTML code.
August 11th, 2008 at 2:09 pm
Hi Patrick,
Sorry, my mistake… I modified your JavaScript file so I could pass width and height of the image to both the blanket and popup, allowing me to center the image on the screen. I just forgot to pass the width and height to the first onClick! Thanks for your help, it’s a wicked component.
August 12th, 2008 at 6:34 pm
That is so freaken awesome!
Been looking for this!
Thanks and keep up the good work!
August 20th, 2008 at 9:01 am
Patrick, I have been using this script for months now on a few pages. I’m old and brain damaged, and slow, but once I figured out how to get in there and change stuff to do what I wanted people think I’m a bleeding genius… Thank you!
Example: Driving two separate iFrames at: http://chips.ourspecial.net/
and all the different Radar popups at http://ourspecial.net/test1/osnrss1.htm
I think I disregarded the blanket effects, don’t remember off hand just how, but I pulled them in to eliminate the visible effect… anyway it presents a super display, and is very effective!
Thanks again! And if you’ve got any suggestions I’d appreciate it.
Mike
___________
August 22nd, 2008 at 10:07 pm
Well I can’t believe I finally found what I wanted by typing the correct words on Goooogle!!! The script is EXACTLY what I need and I’ve tested it OK on Firefox 2+3, Netscape 9, IE6+7 and Safari.
Only thing I don’t like is that the popup is shown in the middle of the entire page, not the middle of the page’s visible area. When the link to show your pop is on the top of a large page, it will appear far below the current page area and the user shall have to scroll in order to locate the popup.
To fix this behaviour and open the popup in the [b]middle of the window[/b], popUpDiv_height should be set to this value: window.innerHeight/2-150; (where 150 is the popup height)
Also, those weird french quotes should be replaced by straight quotes, but that’s simply a detail. Script is great, thanks!!
August 22nd, 2008 at 10:15 pm
I already found a bug on my correction code: window.innerHeight is not accepted by IE in sctrict mode.
To get the current browser window size, this function should be used: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
August 26th, 2008 at 9:18 am
Hi, first script is really great…
I have one problem with displaying blanket in IE7. Blanket covers only window height but not whole scroll height. In FF it is OK. This is link http://www.zlatni-kljuc.com/sl/index.php (you click on ‘Rezultati’)…
Thank you, greetings from Croatia.
August 26th, 2008 at 9:22 am
Hi Viktor, I’m not entirely sure, did you change any code?
August 26th, 2008 at 9:28 am
No I didn’t… but one question, in js file function
popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle(‘blanket’);
toggle(windowname);
do I have to change this variable windowname?
September 11th, 2008 at 6:11 am
Hi. I also have this problem. I haven’t changed the code.
When popping up a window, the blanket only covers till the bottom of the window height, not the scroll height. So if you scroll down further, the blanket is gone.
Open: http://sunayna.fw.hu, shrink the window, so you have a scrollbar, then click on “Regisztralok” at the top. Now popup window appears, and blanket appears behind it. But if you scroll down, the blanket does not present at the bottom of the page. Tried in FF3 and in IE7. Also tried to play with the parameters, but still no success.
I noticed, if I skip the .parentnode from the code, the blanket presents, but on resize, it messes up the window. (I call windowpos on onresize event, to keep the popup window in place all the time).
I tried not to set the blanket height in the js, but in the css file, but the height 100% still only the height of the actual window, not the whole scrollable area.
Any advice?
September 11th, 2008 at 6:28 am
Actually, don’t see my given example, as I’m working on it and changed it already.
But the problem still exists. I’ve changed the blanket height to my page’s div height, but it’s still not perfect, because if I open it on a large screen, the bottom is not covered (after my page ended).
September 11th, 2008 at 8:42 am
dracoon, it looks like you’ve got everything to auto-resize. It’s working on my end with FF3. How’s it working on your end?
September 13th, 2008 at 11:32 am
Almost perfect.
var frameheight = document.getElementById(‘frame’).offsetHeight;
if (frameheight > blanket_height) {blanket.style.height = frameheight + ‘px’;}
else {blanket.style.height = blanket_height + ‘px’;}
I fixed it by using the height of the frame too to calculate the the required blanket size. Now, the only problem is that I use an equal column techique that adds 20000 padding -20000 margin to my frame, and mozilla 2.x only calculates the padding, not the margin to the offsetheight parameter. So, in mozilla 2.x, the blanket becomes very long, but in other browsers I tried (FF3, IE7, Chrome) it’s fine.
September 14th, 2008 at 7:22 am
Hallo Patrick,
I am from Holland, so my English isn’t very wel
..
I use your script and I like it but it doesn’t work like I would. The blanket-div isn’t opening 100% width, but (I think) for 75%.
How can I make this correctly to work?
Leon
September 14th, 2008 at 12:22 pm
Dracoon, that’s awesome!
Leon, make sure the blanket-div is called and closed right after the body tag.
September 14th, 2008 at 4:36 pm
I played with parameters and code and I think i know where is problem… In header must be tag, else with any other tag (as ) in IE blanket would not cover entire scroll page height…
September 14th, 2008 at 4:38 pm
I played with parameters and code and I think i know where is problem… In header must be DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd tag, else with any other tag (as DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”) in IE blanket would not cover entire scroll page height…
September 14th, 2008 at 10:35 pm
The Tag should be right after body tag opens, Viktor.
October 9th, 2008 at 4:42 pm
Hi Patrick, After ages of searching google I came across your blog. I really like the idea of this pop-up however I want it to popup when the page opens. To test the code, I copied the source code from your demo and removed the display:none from the div containers. this is what I get: http://www.allbuyart.com/qwer.html. You will notice that for some reason the blanket turns into a thin bar instead of a blanket. If you click on ‘Click Here To Open The Pop Up’ after closing the pop up it works fine.
Please tell me how to fix it so that the blanket is a blanket instead of a thin bar at the top?
kind regard
Mike
October 9th, 2008 at 4:44 pm
sorry, the above link doesn’t work, try http://www.allbuyart.com/qwer.html
cheers
October 9th, 2008 at 4:46 pm
Mike, instead of removing display:none, run the popup function on your page.
The popup function resizes the blanket.
October 9th, 2008 at 6:39 pm
Hey guys, great script, I was wondering how I might go about getting this to load when a page loads ( like header.php ) and how I might go about setting it to load only once / 24 hours ( cookies) ? THanks!
October 9th, 2008 at 8:37 pm
Hey, Im sorry for asking hte same question, I ssearched on this site to see if anyone asked what i did and it didnt find anything, now that i actually read each comment, i see its answered,
Your resolution to getting it to load on page load was to remove display:none from both the divs,
I did this, but the blanket doesnt load, just the overlay, any idea why? Id still like to have help figuring out how to make this not load everything the sites loaded, but instead once every 24 hours or so?
October 9th, 2008 at 8:40 pm
sorry, p.s. here’s my link http://youknowwhatiheard.com/blanket/
October 9th, 2008 at 9:21 pm
wow, i just read the comments directly above mine (I NEED COFFEE TODAY) and noticed that hes asking the same exact thing as me, can you still help me in using cookies with this? ive never used cookies but realize this is how I need to accomplish this, plus how do i go about “running the popup function on my page” ?
October 10th, 2008 at 8:57 am
You need to insert functions so the scripts can set/read cookies: http://www.w3schools.com/js/js_cookies.asp
window.onload = imafunction;
function imafunction() {
if (getCookie(‘myCookieName’)==’hello’) {popup(‘divname’);}
setCookie(‘myCookieName’,'hello’,30);
}
October 10th, 2008 at 11:24 am
Thanks pat, Ill try looking into that today and get back to you, im still not sure what you meant as far as “runnning the popup function on my page” ( Since im having it popup on the page load )
October 10th, 2008 at 6:46 pm
if someone would offer to do this for me, I will pay you via paypal
Im lost :-X
October 12th, 2008 at 7:45 am
Thanks for the help Patrick.
I’m too trying to use cookies with it but I haven’t got a clue how to do it, javascript is over my head. Would be great if you could add a bit of code to set cookies. cheers
October 12th, 2008 at 5:12 pm
Here’s how to do it, just copy and paste the code:
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i
if(!readCookie(‘wroteIt’)){
document.write(‘Click Me To Close‘);
createCookie(‘wroteIt’, ‘wroteIt’, 1);
}
October 12th, 2008 at 5:16 pm
ignore the above the blog software didn’t like the code, to get the code visit http://www.allbuyart.com/cookiecode
October 12th, 2008 at 5:28 pm
Hi Pat, I was testing your code across other browsers, I noticed that when you use netscape, the blanket is black and has no opacity. I narrowed it down to the javascript being the problem. How can the script be changed to make the blanket transparent and grey?
Thanks
Mike
October 13th, 2008 at 1:57 am
hey mike, I went ahead and tryed using your “allbuyart.com/cookiecode” code and it had a couple “errored characters” that didnt display ( I assumed they were quotation marks, replaced em) and couldnt get the code to work.
http://www.youknowwhatiheard.com/blanket/
Look at the source to see what Im using. Thanks!
October 13th, 2008 at 4:44 am
Hi, here’s a page where i’ve used it http://www.allbuyart.com/art-news-why-would-you-want-to-buy-misery.asp
have a lookat the code. I’ll check the code you used tonight. I noticed you don’t have html tags at the beggining and end, not sure if this makes a difference.
October 13th, 2008 at 4:03 pm
Thanks Mike, I’m at work right now and cant really tweak around with my sites code, by using your code is it still possible to have opacity?
October 16th, 2008 at 1:34 pm
any help really would be apprecaited
October 16th, 2008 at 2:07 pm
Are these CSS lines still there:
opacity: 0.65;
filter:alpha(opacity=65);
October 16th, 2008 at 11:38 pm
Okay, I used your exact code, put it at the top of my header.php file, and it ended up makign my entire site stack really weird, any idea why?
October 22nd, 2008 at 5:00 am
Hi sir, I’m currently creating a function which shows pictures, sir can you give me an idea of how I can add a previous and next function to it using your code.. Im just a youngster here.. tnx
October 28th, 2008 at 12:54 pm
Hey Patrick,
I was blissfully using your script setup to pop-in windows on my client’s site until I found out that the blanket isn’t covering the entire window in IE 6 – it only extends 200px or so from the left edge. As far as I can tell, the only difference between my setup and yours is that I’m using a class for the popUpDiv instead of an ID (this was necessary to have multiple pop-ins on the same page). Here’s my installation (relevant links on the right):
http://angledend.com/clients/mse/variety_bands_orchestras.html
CSS:
http://angledend.com/clients/mse/styles.css
Any idea what’s going on here? FWIW, I got the same result before moving your “IE 5″ filter directly into the CSS block, which seems to work fine in FF, Safari and IE, btw (in other words, it doesn’t seem to need the if/then statement).
October 28th, 2008 at 3:42 pm
Whit, you need to place “Blanket” at the top of your HTML, right after you open the body tag.
October 28th, 2008 at 3:49 pm
AHHH! I had no idea.
Awesome, thanks so much Patrick.
October 28th, 2008 at 7:55 pm
Hey Im still not able to figure this out…. could someone please help me. thanks!
November 4th, 2008 at 6:26 pm
Hi Patrick,
First of all I must say thank your for a great script. Also, I am very surprised with your fast answers to people’s questions. Keep on
I hope my question isn’t hard enough. I am convinced that I am so close to solution but I couldn’t find it even with reading all of earlier comments..
so on site http://www.ofir.hr/ofir2/index2.php?lk=portfolio
i have small pictures..when I click on first two popup is great, just where I want it..but when I click on last one with orange border it drops me back to upper position..I want that popup to be also in position like upper once, without “jumping” around..
I hope I was clear enough,
Looking forward to your answer.
Milan
November 6th, 2008 at 5:42 pm
Sir,
can u please answer that when we open “Click here to open the pop up” in new tab the same link appears.
Is there is any way that when we right click on it then in the new tab “click me to close” will appear.
November 30th, 2008 at 10:00 pm
Hi!
I was able to use your codes and am happy to say that it worked in the website am doing for a friend since I’m searching for a nice and better way to make those images pop up.
But here’s my concern:
On the website that I’m doing, there are about 33 images that hopefully pops up when it is clicked. i’ve used your codes and the thing is that the image that pops up is the first image. for example i clicked on image 14, the image that shows up would always be image one and vice versa.
December 2nd, 2008 at 10:56 am
Rachel -
The most likely problem is that you’re calling the same div for all 33 images…you’ll have to create unique divs for each image (or, as was mentioned above, change the div ID to a CLASS, then all you have to do is create the unique IDs for the content) …hope that helps. There’s some more on this in previous questions, have a look if you’re still confused
December 5th, 2008 at 3:31 pm
Hi Patrick
My first time with your script. I think (know!!) I must be missing something. On the attached page http://www.acuitycommunications.co.uk/test/about.html the popUpDiv is visible. I don’t understand how the javascript file is linked.
As I say, I am missing something fundamental. Please put me out of my misery
December 5th, 2008 at 4:00 pm
You have to fix the quotes in your sources, view your source and look at the line with div id=”blanket” to know what i’m saying, the double quotes are curly quotes.
December 5th, 2008 at 5:41 pm
Thanks Pat. I had copied and pasted. But now sorted that bit. Still maybe some questions to come though I want to try and sort it myself first. Thanks again
December 5th, 2008 at 8:07 pm
Hi Pat
some things I can’t sort out.
Probably not directly related to your script but maybe you can help me
Why is my text in the pink colour when I have defined text for the popUpDiv as #686868
Why do I have a line space above my click on link (after “established by”)
Why is my popUpDiv background not white.
How do I move the position of the Pop Up div? In the javascript?
Grateful for any help.
December 5th, 2008 at 8:21 pm
Sorted out the pink text
Just being dense on that one!
December 5th, 2008 at 9:03 pm
Hi Pat
Ignore all before. I’ve sorted it all now except for positioning. Do I look to the javascript for that? All very simple so far once I got my brain in gear
December 5th, 2008 at 11:55 pm
CSS, and there’s a chunk in the javascript where it sets the position based on the height/width of the div.
December 6th, 2008 at 12:14 pm
Hi Pat
Thanks for all your speedy help. I have everything working fine now in all browsers on Mac and Win in except in the dreaded IE6 (what a surprise!) where the blanket is being cut off about 80% horizontally across the wrapper div in which it is placed. As I say, works fine in everything else.
Any ideas?
December 6th, 2008 at 1:33 pm
Take the blanket outside of your wrapper.
December 6th, 2008 at 1:58 pm
Thanks for that as always Pat. I thought I’d tried that but obviously not as that has fixed that problem. However in both IE6 and 7 the wrapper top margin value now changes on activating the popUpDiv. I know IE has some funny ideas about margins but can’t work this one out.
December 6th, 2008 at 9:56 pm
I’m trying to get this working on this page HERE.
So far, I only have it wired for the first B&W thumbnail in the list shown on that page. When I click on the thumbnail, the pop-up image works, but the blanket doesn’t fill the screen, and the image is too far down and to the right. Any guidance would be greatly appreciated. (Thanks for the tutorial. Excellent feature.)
December 21st, 2008 at 3:50 pm
Hello Patrick , I’m doing a web site right now but I’m still lost on how to pisition the Div box in the middle of the screen with specific top margin pixels. I red althese posts and I’m totally confused about where that might be :the Java Script or the CSS file. I have several Div IDs created since I have several popups to open and they do open and close as I want but they just appears in the same vertical position wher I have the thumbnails images that trigger the popup.
Please let me know what lines of code should I add or modify.
Thanks
December 26th, 2008 at 12:43 pm
Hello Patrick,
I am making website using cmsmadesimple so in the content of the page,i insert the javascript and css in the literal tag and outside that i place the html code like above.It works but the pop up window closes unexpectedly after 1 second and go to the index page.
I tried to figure why it happened and i looked at the javascript code and there is nothing relating to time.I just think is it because of z-index or something and can you explain for me about the number you choose for z-index?
Thanks heaps and merry christmas.
December 29th, 2008 at 6:59 am
Hi
Thanks for your script. It works perfectly in firefox and in IE7. It doesnt look good in IE 6
I havent changed anything in your code other than the “window_width=window_width/2-350;”. In IE6 opacity is not working and also the popup image is not center aligned. it is at the left side of the browser. could you please tell me how to fix this issue.
thanks
Ramya
January 5th, 2009 at 9:47 am
Hello,
Awesome script, I must say.
But there’s one con: I have dozens of popups of different sizes. Is there anyway that
window_width=window_width/2-150;//150 is half popup’s width
popUpDiv_height=blanket_height/2-150; //150 is half popup’s height
could get the popup’s half sizes automatically?
Thanks!
January 5th, 2009 at 2:58 pm
You’d have to rewrite the script a bit. Possibly pulling out each of their height using .height
January 5th, 2009 at 3:04 pm
I tried that. Then I thought that maybe it’s pulling up “px” with it, so I did a replace(). And then the entire popup didn’t show at all… I’m no JavaScript coder at all.
January 6th, 2009 at 5:17 pm
Hay,
Awesome Code, I’m sure you’ve heard that before
Is there any way to have the pop up appear on the position where the page is without going back to the top and stay at the page position after viewing the pop up?
Sorry I have a limited knowledge of JavaScript. I played around with the vertical alignment but it sill resets the page to the top. Otherwise I would have tried to make changes myself. Any help would be greatly appreciated.
Thank you,
ADNAN
January 7th, 2009 at 12:43 am
Your suggestions on how to display various types of files were helpful and appreciated. Now, I have a problem vertically positioning the popup. In you example, the popup is near the top of the screen, but in the current web page i am working with, the popup is located in the lower portion of the screen and extends beyond the lower boundary. The entire popup can be seen, but scrolling is required. I am using and iframe to display an htm file. I could really use your help. Thanks.
January 7th, 2009 at 4:40 pm
I’m trying to get it so the window opens dead center on any screen, any idea on how I would do this?
January 13th, 2009 at 6:14 am
Dear Patrick,
I am joining the thanking choir. I am a classical pianist, and with your code I was able to have my youtube demo videos appear as centered popups. I am only an amateur, so when you have the time, could you give us some pointers regarding how to combine scriptaculous for the fade in and fade out effects? Thanks!
January 20th, 2009 at 5:47 am
Another huge thanks, this is fantastic. I have just finished setting up my online portfolio and this worked great for my animation clips. Feel free to check it out! http://www.colinstuartanimation.com
January 22nd, 2009 at 12:19 pm
Patrick,
Thank you for sharing your findings. This saved me huge amounts of time in not having to write something like this. A++
January 22nd, 2009 at 1:41 pm
Fantastic snippet of code! Exactly what I was looking for. Thanks.
January 31st, 2009 at 7:52 am
Hi patrick,
First of all, i’d really like you’re code.
It works fine. I’ve read some tips of this website.
I’ve got one problem, i’ve you have time, please check my website.
In the menu under The Band, i’ve used you’re code.
My only problem is that when you click on one of the pictures my css on the site changes.
I’m guessing that i’ve done something wrong with you’re code.
Can you take a look at my site ?
I’m sorry for my bad english, i’m from holland.
So it’s not my preferd language.
Thanks.
February 6th, 2009 at 8:51 am
Wonderful job! I love this script and css combo.
I know this question has been asked before, but I didn’t find a reply.
Could you tell us how to get a popup to appear in the center of the browser window? Right now the popup appears in the middle of the site. Hope this makes sense. Thanks.
February 6th, 2009 at 8:53 am
Just thought of something to add to my previous post.
How can we keep from going to the top of the website when a popup is opened?
Many Thanks.
February 6th, 2009 at 9:55 am
I don’t have the resources to support this. You’ll have to play with the code.
February 6th, 2009 at 1:04 pm
Hi,
First of all I should thank you for your code.
I have got one problem. In IE6 when I open the pop up it is not hiding the combo boxes I have in the window. It is hiding checkboxes , radio buttons and Images too, only problem is with combo boxes. I have 4 to 5 combo boxes in the window and I would like to hide those boxes as well. It works fine in firefox. Please let me know how to fix this issue.
Infact the combo box is overlapping the popup div.
Please suggest me a solution.
Thank you once again
February 8th, 2009 at 8:05 am
Love the script, it’s what I’ve been searching for, for hours.
I am trying to basically click on a few different thumbnails and then have a bigger version of the image popup over the previous page. With the bigger version of the image showing with the background being translucent. Can you please show us how this can be done. It would be most appreciated.
Thanks!
February 12th, 2009 at 10:52 pm
This is great but i don’t want it to run on click i want it to go onload … I tried putting the onload call in the body tag but doesn’t seem to work … can you help?
February 13th, 2009 at 12:41 pm
Hi Patrick! Thank you for sharing this with the world. This script is exactly what I was looking for, and its working great.
This may have already been answered (apologies, I didn’t read all of the many comments) but in response to Martin’s question (http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/#comment-1972) about Flash being used on page and in the pop-up, I have a solution.
Apparently, you have to add a parameter to your embed method of the Flash that tells the browser to render the flash window as part of the page, and not as a window on top of the page. I know that sounds a bit technical, but the fix is quite easy.
To your Flash embed code, just make sure you add this parameter if its not already there: wmode=”opaque” (or, alternately, wmode=”transparent” — I’m still not clear on the different between those two values, but they both seem to get the job done).
So, for example, if you are using the old school object embed, do this:
Note that I added the value in both a param tag, and in the embed tag.
I think FLash now has this option available when you publish an SWF from your .FLA, so you could probbably make sure its included that way too.
Email me if any further clarification is needed. This problem was plaguing me for a while, both with this script and with other DHTML elements – the Flash always appeared above everything. Adding this parameter/value fixes that.
February 13th, 2009 at 12:44 pm
Sorry, just reazlied my html example got eaten. Here it is, where [ ] equals
[object height="300" width="400" ]
[param name="allowFullScreen" value="true" /]
[param name="wmode" value="opaque" /]
[param name="movie" value="http://natalie.feedroom.com/hsus/oneclip/Player.swf?site=hsus&skin=oneclip&fr_story=ff1392887f7a9f818e412e18fa60c3fb78715a9d&env=prod "/]
February 13th, 2009 at 12:47 pm
Arg. Sorry. Patrick, please feel free to delete or edit the crappy code comment.
«object height=”300″ width=”400″»
«param name=”allowFullScreen” value=”true”»
«param name=”wmode” value=”opaque”»
«param name=”movie” value=”http://natalie.feedroom.com/hsus/oneclip/Player.swf?site=hsus&skin=oneclip&fr_story=ff1392887f7a9f818e412e18fa60c3fb78715a9d&env=prod “/»
«embed src= “http://natalie.feedroom.com/hsus/oneclip/Player.swf?site=hsus&skin=oneclip&fr_story=ff1392887f7a9f818e412e18fa60c3fb78715a9d&env=prod” height=”300″ width=”400″ allowFullScreen=”true” wmode=”opaque” /»
«/object»
February 13th, 2009 at 4:13 pm
Thanks for this cool script.
Couple of suggestions to the readers (mostly picked up in various ways above)
To avoid a page refresh, add return false to the closing line:
«a href=“” onclick=“popup(‘popUpDiv’); return false”»Click Me To Close«/a»
To position the popup relative to the insertion point:
– remove the positioning lines in the Javascript functions
– add top and left to the CSS for the PopUp
– enclose the calling code in a relatively positioned div:
«div style=“position:relative”»
…code…
«/div»
The way to embed a flash (youtube) movie suggested by youtube is not valid xhtml. A valid method (http://www.bernzilla.com/item.php?id=681) is
«object type=“application/x-shockwave-flash” width=“425px” height=“344px” data=“http://www.youtube.com/v/FlZ-Zu5nBRc&hl=en&fs=1” wmode=“opaque”»
«param name=“movie” value=“http://www.youtube.com/v/FlZ-Zu5nBRc&hl=en&fs=1” /»
«/object»
where I’ve added the wmode=“opaque” to the object tag. It’s not needed in the param tag.
Thanks!!
February 17th, 2009 at 6:00 pm
Great script!
Is there a way to pass a value from a loop in ASP?…
Have a dynamic list of thumbnail which upon click should pass a filename og open the big pix.
something like this:
but I can’t get the variable filename via request.querystring into the popup….
How do I do that???
Thanks in advance
February 17th, 2009 at 6:02 pm
ups…
something like this:
a href =’?Filename=’
but I can’t get the variable filename via request.querystring into the popup….
How do I do that???
Thanks in advance
February 20th, 2009 at 5:51 am
Hi patrick,
this one has me stumped. whenever i click the link to open the popup, the popup just flashes for about a sec and then disappears..
the divs are already placed immediately after the BODY tag… this happens for both ff and ie. any idea what might be causing this?
February 20th, 2009 at 9:33 am
Marty, do a search and replace for the function.. popupDiv, I believe. it might be used twice.
February 23rd, 2009 at 1:58 am
HeyPatrick
Awesome script.
I got it working in a second and now I was wondering how to use the popup to Show users information.
What I need is a way to click on a link an pass a GET var with user ID. I know that the click to open does not reload the page, so I changed the oiginal “#” link for: #” onclick=”popup(‘popUpDiv’)”>. On this I reload the same page and allow the User ID to pass via GET, but when the Page reloads the popup appears and disappears in the blink of an eye.
Any ideas on how to get the popup to stay till i hit the close link?
Thanks from Argentina!
July 7th, 2009 at 6:11 pm
Awesome script but need to extend it some. I have multiple popups on one page and they are all different sizes. Since the cspopup.js has fixed numbers for widths, only one of my popups center properly.
I have found a cheap and dirty way of fixing this by modifying the script so I can pass the width and height to the javascript functions but isn’t there a better way to use javascript to automatically detect the actual size of the popup div?
July 8th, 2009 at 5:06 pm
This is a really good code thanks man I was trying to this for months…
July 9th, 2009 at 4:48 pm
Hey i’m a little new to this and I don’t know what to do with the js file? should i just upload it to the same directory as the html file?
July 10th, 2009 at 11:41 am
Hi Patrick,
Nice script but a small question, the blank is not covering for entire screen in IE 8but it works fine in all other browsers? any suggestion?
July 13th, 2009 at 11:02 pm
Wonderfull script, I was able to make it display automatically after I updated a record in a database. However it will not close when I click on the close link. What I’m I missing?
July 14th, 2009 at 3:26 pm
Thanks this helps.
July 14th, 2009 at 6:03 pm
———————————————————————-
Adam Says:
July 9th, 2009 at 4:48 pm
Hey i’m a little new to this and I don’t know what to do with the js file? should i just upload it to the same directory as the html file?
————————————————————————
Yes! you can upload it to the same directory.
July 19th, 2009 at 11:26 am
hi!
i’m using this on my website now and i noticed that when you click and it pops up, when you resize the window the popup isn’t aligned in the center. can anyone fix that?
thanks and i really appreciate this simple yet effective css code.
August 18th, 2009 at 7:58 pm
Hi
This function removes the need to put style display attributes in the html if you prefer to keep your css completely separate:
function toggle(layer) {
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( layer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[layer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[layer];
vis = elem.style; // if the style.display value is blank we try to figure it out here
if(vis.display==”&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?’block’:'none’;
vis.display = (vis.display==”||vis.display==’block’)?’none’:'block’;
}
August 25th, 2009 at 12:59 pm
Thanks Patrick for awesome code.
I just have one question:
How do I resize the blanket height and width? For some reason it just covers the window size. I have horizontal and vertical scroll bars on my screens and need the blanket allover.
Thanks again!
-Bhavana
August 26th, 2009 at 9:53 am
Hi Patrick:
Thanks for the wonderful script.
I have a question. I have modified your script to prevent the background window from having scrolling when the pop-up occurs, like so:
function togglePopup(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == ‘none’ ) {
el.style.display = ‘block’;
document.body.scroll = “no”; //IE
document.body.style.overflow = “hidden”; //FFX
} else {
el.style.display = ‘none’;
document.body.style.overflow = “visible”; //FFX
document.body.scroll=”yes”; //IE
}
}
This works great on Firefox. However on IE, the scrolling correctly dissapears when pop-up, but does not appear back on Close.
document.body.scroll works correctly if independently placed as Close/Open links on IE.
Any help would be greatly appreciated.
NI+IN
August 26th, 2009 at 1:42 pm
Hi
I’m probably being impatient, as I am sure the answer is somewhere in the comments!
I have the code working nicely, but I want the popup larger. This I can do, but then the top left corner still originates at the same point. I want the top left to sit, well, more top and left, effectively centering the popup to the site window, regardless of its size (within reasonable boundaries, of course).
Let’s say I have a 500×500 pop-up. How do I center this to the site?
Using Firefox 3.
Thanks for the script – it took me ages to find such a good tutorial!
James
August 31st, 2009 at 5:06 pm
Does anyone know of a way to get this to appear on top of form elements, namely drop downs? In IE6 the blanket covers everything but my drop downs, which you can still interact with.
Thanks,
Fred
September 8th, 2009 at 4:00 am
Great bit of code, many thanks for that…my coding is definately not up to doing it myself. One big question though has anybody managed a workaround with IE8..the problem is that IE8 doesnt support position:absolute (I know, dont you just love microsoft) so the #blanket tends to be off to the left of the screen
September 8th, 2009 at 2:36 pm
That’s a great and easy to use tool, thank you!
But beside of all glory there is a bug:
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
There is no closing curly bracket…
September 18th, 2009 at 10:17 am
Hi
This is a nice little bit of script.
I have added it to site running Joomla (Open Source Content Management System) and with a little tweaking here and there I got it to work loading a manufacturers catalogue inside an iframe which now sits nicely over our site when the link is clicked.
However, there is now a delay in page load as naturally the browser loads the iframe contents as well even though they are not visible… Is there anyway you know of to make the iframe only load on the display of your neat little popup??
September 18th, 2009 at 6:25 pm
Awesome! Simply awesome! Do you know any other answer to the issue that Paul brought up without having to define height and width and all that?
Paul said, “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.thanks”
I am having this issue in Firefox but in IE it seems fine. Thanks so much!
September 19th, 2009 at 10:36 am
This is a great piece of script. Thank you very much. I have a question which I haven’t found the answer to in the comments above. I am using this script to have a popup appear which displays videos of my work. The links for the videos are at down the page a bit so you have to scroll to find the, but when I click the popup, the page in the background scrolls back to the top of the page. Is there any way that I can have the popup appear over the link without the scrolling being reset in the background? Thanks
September 19th, 2009 at 10:38 am
Also, forgot to mention in my post above, that (like Steve) I would like to have the popup appear in the centre of the window rather than the centre of the page. If there is a way to set this in the code. Thanks
September 19th, 2009 at 1:20 pm
OK, I have figured out how to stop the page from reloading when you click the popup link and also when you click the close popup link. Can anybody please direct me how to centre the popup in the window (not the page) both vertically and horizontally (so it remains in the exact centre when page is resized either way). Thanks
September 21st, 2009 at 11:48 am
David:
Try changing csspopup.js script blanket_size function line:
popUpDiv_height=blanket_height/2-150;//150 is half popup’s height
into:
popUpDiv_height=viewportheight/2-150;//150 is half popup’s height
Hope that helps.
September 21st, 2009 at 11:55 am
Patrick! Your script is great. Thanks for your post.
Also, I have one question: Does anybody know how to make the pop up div to load a new page into it? Basically, I would like the pop up window to run a server side vb script and show user the result. The only way to start a server side script after the web page has been loaded is to reload the content. I don’t want the whole page to be reloaded, just the pop up div.
Thanks for any ideas.
September 21st, 2009 at 12:09 pm
Hi Peter…
Will an ‘Iframe’ suit your needs?
I managed to get the script to load an Iframe (see above) my only ‘issue’ it has increased the page load, but that is due to the page loaded not this great script.
Hope that helps.
September 21st, 2009 at 12:23 pm
Thought I may as well give you some IFrame code
(You will need to adjust the height and width of your Iframe as below to suit your ‘page’ that is to load isdie the frame and you may have to modify the .js script height and width as other people have mentioned above.)
Sorry – Your browser does not support iframes.
September 21st, 2009 at 12:25 pm
thought as much.. the code was stripped from my post… never mind… look up ‘Iframe’ in google try the ‘w3 schools’ site.
September 21st, 2009 at 12:28 pm
I am having same problem as others how do i get the content from the css popup to automatically center itself in the browser because atm if i resize my browser its location doesnt auto-center in the window.
September 21st, 2009 at 12:42 pm
Hi quen
You need to modify the js code and change the height and width to be half the height width of your object or iframe.
look for this line in the .js (around line 25) >>
popUpDiv_height=blanket_height/2-400;//150 is half popup’s height
and this (around line 43) >>
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-390;//150 is half popup’s width
popUpDiv.style.left = window_width + ‘px’;
Then change the numbers in red to the popus height and width.
hope that helps. I had to fiddle around to get it to work but it did.
September 21st, 2009 at 1:43 pm
Nice script and I am using it in many places. But there is only one problem, vertical centering on long documents.
When the entire document fits in the browser window, vertical centering works great, but when the document is a long one and you scroll way down the page and click a link to open the cssPopup, you have to scroll way up to the top just to see the popup. This is a problem mainly in firefox 3.
Does anyone have any tips for vertically centering in the browser and not just in the document?
September 21st, 2009 at 10:26 pm
Hi, I really would like to use this code to allow users on my website to open an html with a streaming radio player on it. Currently my hyperlink for the player just opens a new window with the player on it which I hate. I don’t really understand where to put the codes you listed on my web page. I understand where to put the CSS portion (inbetween my style tags) but I do not understand where to put the html tags you’ve listed. As well, where, in the html tags you’ve listed, where do I put the page I’m linking to? So, anotherwords, can you please walk me through this step by step because I feel like a complete idiot. Please reply via email to my email address so I do not have to keep coming back here to check if you’ve replied. That would be greatly appreciated.
September 22nd, 2009 at 5:59 am
Chris J: thanks for your suggestion but I’m afraid it won’t work for me. The Iframe load the content on the web page start, not on the pop up div display. I need the content to be loaded up at the pop up div display.
September 22nd, 2009 at 6:04 am
David, Quen and Les:
I posted a solution for you but it still awaits for moderation.
Please change the .js script line 26 blanket_height to viewportheight
I hope that helps.
September 22nd, 2009 at 6:07 am
@Peter
Shame… that’s similar to my problem. the additional ‘iframe’ page is loading into the div ready for display and therefore causing slower page loading.
I hope someone finds a way to modify the script it to Popup first and then load the content rather than other way.
Anyone??
September 23rd, 2009 at 11:54 am
Hi Patrick,
Sorry to trouble you! I have gone through all your comments but still the ‘blanket’ div is not 100% in width in IE6(everything works perfectly in FF). I have made the div right after the start of tag as you have suggested, also the opacity property isn’t working, you can check the link below
http://myattendance.000space.com/admin.php?opt=usracc
http://myattendance.000space.com/include/style.css (This is a huge file so just search the the keyword “blanket”)
PLEASE HELP!
September 24th, 2009 at 4:30 pm
Hi
I also appreciate the script, and it is working well for me…
I have one question. Once my popup is open with an image in it, I’m wondering if it is possible to have a few links (within the popup) to other images, and have them targeted to appear in the same popup? I’m trying to avoid someone opening and closing too many times.
Thanks!
September 26th, 2009 at 8:49 pm
Hi Patrick.
Thanks so much for this. It has been a tremendous help with the website I am building. I appreciate your willingness to share with folks. I have a question for ya about this site I’m working on. I am having some issues with how the css is rendering on IE. (Go ‘ol aberrant IE). I’ve been working on this for days and haven’t come up with a solution yet.
The site is http://redblackblonde.com/test_main3.html
The little mini music player- when you click on a nav link on the left hand side of the folder, instead of the pop up window going on top of everything, the mini player still appears on top of the pop up window. For example, if you click on RBB Bio, a window pops up but the mini player sits right on top of it. I have played with positioning and z-index with no luck.
I appreciate any insight you could give me. Thanks for you time!
JoAnne
September 27th, 2009 at 1:15 pm
Great mini tutorial, I love the idea of doing popups that way.
Guess I could use a library for these things but I like to understand how things work.
I added this feature on a small website I am working on and its working fine, just had two problems.
The first was a bit difficult but I found the solution, it seems the Javascript that computes the size of the blanket won’t work on every browser so you can use this instead to retrieve the total page height/width:
//Firefox
if( window.innerHeight && window.scrollMaxY ) {
pageWidth = window.innerWidth + window.scrollMaxX;
pageHeight = window.innerHeight + window.scrollMaxY;
}
//All but Explorer Mac
else if( document.body.scrollHeight > document.body.offsetHeight ) {
pageWidth = document.body.scrollWidth;
pageHeight = document.body.scrollHeight;
}
// works in Explorer 6 Strict, Mozilla (not FF) and Safari
else {
pageWidth = document.body.offsetWidth + document.body.offsetLeft;
pageHeight = document.body.offsetHeight + document.body.offsetTop;
}
I found the solution here: http://codylindley.com/Webdev/295/javascript-get-page-height-with-scroll
My second problem is apparently if I scroll all the way down and trigger the popup the focus stays at the bottom of the page instead of going to the “popup” even though I added el.focus() on the toggle function. I haven’t found a solution for this yet but I will post here as soon as I find it.
Again, nice tutorial!
September 28th, 2009 at 5:14 am
@ JoAnne
Have you tried altering the order of your source code? Also, I notice you are using a ‘Flash’ based media player… I don’t think you can make anything ‘cover’ or appear over flash.
hope that helps.
September 28th, 2009 at 11:38 am
hi chris.
thanks so much for responding to me! this is very helpful. didn’t know that about flash. what’s weird is that is works fine on safari and ff for the mac. i’m not sure i understand what you mean about altering the order of the code..?
thanks again.
September 28th, 2009 at 11:58 am
Hi JoAnne
What I mean by ‘altering the order of the code’ is:
In your pages HTML (source code) the media player is listed last as the page loads… As it is further down the page than your other content is read last as the page is built in the browser. To be honest I doubt in this case that moving it will make a lot of difference but it’s worth a try. If it does solve the issue you can CSS can be used to position it where you would like on the page ‘visually’ although it is actually listed higher in the code. Sadly IE is the most common broswer but also the worst.
I hope that makes some sense…
September 28th, 2009 at 12:09 pm
thanks for the quick reply chris! ok, i gotcha. what you’re saying makes perfect sense. i’ll try playing with it and see what happens. curse microsoft and their silly, little most-commonly-used browser…
cheers!
September 28th, 2009 at 2:54 pm
I have a page that scrolls with about 50 product listings and want to use this for a form to “review items” for each particular product.
However, if I scroll down to the bottom of the page and click the button the popup shows up at the top of the page and can not be seen since I am looking at a product at the bottom of the page. It works great if I am looking at a product at the top of the page.
Is there anyway to get this to have the popup show up adjusting to where you scroll on the browser?
thanks
September 29th, 2009 at 11:22 am
I have same problem as Jacob. I have multiple product listings and want to pass the product ID to the window to operate on that particular product.
When I try to pass a variable, it shows the one that is set for the first product. (I have review buttons on about 30 products and want to be able to review each one specifically using this)
Does this mean I need to dyanmically create several CSS elements?
October 12th, 2009 at 8:48 am
I’ve been working some issues under IE6 so I thought some of you could use it…
1/ Issue with blanket not covering whole window:
Add the following two lines to window_pos function just before the line containing var popUpDiv = document.getElementById…
var blanket = document.getElementById(‘blanket’);
blanket.style.width = window_width + ‘px’;
2/ Issue with combo boxes appearing on top of the blanket and pop-up window:
This is a common-know issue with IE6. Type ‘IE6 z-index bug’ for various solutions.
For my hidding the combo box in just before showing up the blanket worked well.
I hope that helps for some of you.
October 16th, 2009 at 1:02 pm
Hi, great script!
Just wondering, is there a way to have the window pop up next to a link I clicked, instead of a set position? I’m trying to implement a “view map” link so Google Maps popup. Can this be done?
October 17th, 2009 at 2:10 am
Hi! This script is really amazing!
I just have a question though; for the popup, I set it so that an iframe loads within the popup (I created a separate html file with the iframe and then linked to that file in the part. However, when you click on the link to toggle the popup, the actual iframe html page loads (in a different tab) rather than in the popup. How do I fix this?
October 17th, 2009 at 2:12 am
Yikes, I didn’t know the comment box would recognize html. But yeah, I linked to the html file containing the iframe in the code, hoping that it would appear in the popup part, but instead it load on its own page. How do i fix this?
October 22nd, 2009 at 1:03 am
hi i am using the same code .my parent page contains a drop down and when i click on that link of popUpDiv the parent page gets overlapped by the popup but the drop downs appear on the popup also.how to make the dropdowns overlapped by the popup?
October 22nd, 2009 at 1:57 am
Hi peter can u plz elaborate ur solution about z-index bug because i am also facing the same problem
October 28th, 2009 at 7:15 pm
Worked like a charm.. PS. your demo link shouldn’t popup into a new window.. ;0]
November 7th, 2009 at 8:43 pm
Im trying to center the popups on my screen.. but they popup at different positions depending on my browser’s dimensions. Can anyone figure out how to center WIDTH only.. I have it positioned at the moment so that the popup is 200px from the top of the page.
LIVE WORKING CODE : http://tinypaste.com/a7149d8
November 9th, 2009 at 12:09 pm
Excellent script, thank you very much
I was looking to do the same thing but with the popup always centered according to the user’s vertical scroll position. Thus, I’ve modified the “blanket_size()” function to do so and it seems to work well (even with IE 5.5
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != ‘undefined’) {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if(document.body.scrollTop > 0){
// For IE 5.5
bdy_ref = document.body;
}else{
bdy_ref = document.body.parentNode;
}
if ((viewportheight > bdy_ref.scrollHeight) && (viewportheight > bdy_ref.clientHeight)) {
blanket_height = viewportheight;
} else {
if (bdy_ref.clientHeight > bdy_ref.scrollHeight) {
blanket_height = bdy_ref.clientHeight;
} else {
blanket_height = bdy_ref.scrollHeight;
}
}
var blanket = document.getElementById(‘blanket’);
blanket.style.height = blanket_height + ‘px’;
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height = screen.availHeight/2-350;//350 is the popup’s height
popUpDiv.style.top = (popUpDiv_height + bdy_ref.scrollTop) + ‘px’;
}
Maybe someone can found this useful
November 9th, 2009 at 6:01 pm
How can I add a scrollbar to the popup window. Note, I do not know anything Javascript coding. Thanks for your help!
November 10th, 2009 at 3:38 pm
disregard previous post, I figured it out…
November 13th, 2009 at 5:27 am
Hi martin
i f you need to put flash banner on the back of your blanket , you just type flash parameters wmode transparent
November 20th, 2009 at 3:53 pm
first, i think patrick is no longer responding to comments…
so my second part is open to anyone and everyone…
i’m using this popup for a contact form. when the form is submitted, i have another popup appear, confirming success. then you close the success popup (which also closes the form popup).
but because of the blanket toggle, the blanket disappears when the success popup appears. i want the blanket to remain until i close the success popup.
any ideas?
November 29th, 2009 at 7:43 am
Hi Patrick,
Thanks for the script. It works fine on the web im working on. Im having a trouble on how to change the position of the close button im using to the right side of the pop up instead of the top left.
Thnks.
December 1st, 2009 at 2:10 pm
any way to do an onload rather onlick? How would I do that with your existing code? Not to good with code. Any help would be appreciated.
December 3rd, 2009 at 8:49 am
I want the popup to display when the page loads. I have removed the display:none and now the blanket doesnt appear at all and the popup div appears in the top left of the screen.
Can you offer any help?
Many thanks
December 9th, 2009 at 1:02 pm
Just two quick questions from previous posts: 1. Did Janice get an answer on how to load an HTML file in the popup? 2. Did Niki get an answer on if it is possible to have links (within the popup) to other images, and have them targeted to appear in the same popup?
Thanks folks!
December 17th, 2009 at 11:47 am
This is a fantastic script, but I’ve come across a problem when I create multiple popups.
Basically, when I click the link to load the popups they open fine. If, however, someone doesn’t use the “Close this window” button and tries to click a previous link and open a popup they’ve already looked at, they can’t, because the others have loaded on top of it.
Now, I kind of knew that was there after testing myself, but told myself everyone would click the “close” button after reading each window. I sent the link to two friends to test, though, and they both came back reporting the problem with the links.
Is there any way of having popup 1 (for example) close when I click the link to open popup 2?
You can see the site in progress at http://www.barryhutchison.com/test
Thanks for any help you can offer!
December 23rd, 2009 at 11:36 am
This is a great script. Thank you so much for sharing and for your replies above. I was able to get it working just the way I want to open an overlay on top of a page displaying another site within an iframe. Worked great! And the other guy’s tip about making it so you can click the blanket to close it was fantastic! I initially had a problem with IE but then I realized I didn’t have the right doc type at the top. Make sure you have:
Also to click the blanket to close use:
You can view my sample at on my green cleaning products website at http://www.terafore.net/overlay.php by clicking “air cleaners” on the left menu or at the bottom.
December 23rd, 2009 at 11:38 am
Well my code didn’t display above but you can see all my code on that page above.
January 4th, 2010 at 10:13 pm
[...] last thing.. the original code for this was found here. I made some edits to make it work for my application. Share and [...]
January 7th, 2010 at 9:06 am
Hi,
thanks for this smart script
Did someone succeeded using classes to display different images?
I sure not, and I have grid of thumbnails (>500) so I think adding different IDs for all of them is silly
cheers
January 11th, 2010 at 2:46 am
Hi,
Very nice script !! Thanks for sharing.
Can someone tell me that how can I use this Script without clicking on any button ? I want it to be used when somebody enters my website.
At the same time i have flash in center of the home page. Flash overlaps the pop up and pop up is not visible. How can I get rid of this ?
Thanks in advance !
January 15th, 2010 at 4:31 pm
Hi.
I have a quick question. I wanted to send you my code if that was possible, so you can take a look at where I’m going wrong. Tried using the code above, which is amazing, btw. I can’t seem to make it work, though.
email: laura at applei dot ph
Thanks in advance!
-Laura
January 15th, 2010 at 6:10 pm
Hi, love this script, however i am having some small problems with it.
I am using it as a iframe holder to a login script, i would like there to be no blanket but cant find a way of turning it off, and no matter what i do with the re-sizing it, it remains at its default size.
I know i am probaby doing something wrong, and its probably something simple, but it is not really infuriating
thanks
John
January 15th, 2010 at 6:37 pm
Hi there, great script but am having a problem, the popup is being displayed at the bottom right of the screen rather than the middle of the screen. I haven’t changed any of the code so what could be the problem here?
Hope you can help me.
Many thanks.
Steve
January 19th, 2010 at 2:30 pm
Hello,
Thanks for this great code! All is working successfully, however I would like to position the popup div at the top of the page. Adding top:0px; to the css doesn’t have any effect. Any ideas why this wouldn’t work?
Thanks!
Sam
January 20th, 2010 at 5:09 am
In response to my own question and to hopefully help some others, here is why the popup is not being centered on the page. I thought I had left the code unmodified, this is not the case. I changed the size of the popup div, which required 2 values to be changed in the .js file. Look for popUpDiv_height=blanket_height and window_width=window_width in the .js file. The default values are set to 150, which is 1/2 the size of the originally coded div. Just set these to 1/2 of the changed div size and voila, works like a charm. Hope that made sense, it’s late and I’ve been at this for too long! lol
Thanks again for the great code!
Sam
January 20th, 2010 at 2:38 pm
Does it make any difference to the screen resolution then?
Thank you. Steve
January 23rd, 2010 at 6:51 pm
I’ve been looking for something like this for days. I’m using it to create a calendar with popup events on the dates. I made a separate Css page for the #popUpDiv container scripts so that they can be individually numbered by month and date. It looks and works awesome. Great script, Thanks!
February 6th, 2010 at 10:11 am
i need to the same thing but how do i make it automatic when a page load ,that the pup up come up
February 6th, 2010 at 10:13 am
some one please snd me and answer to my email addrees
shawn@moverscommunity.com how can i make this pop automatic pop up when my home page load
February 15th, 2010 at 8:13 am
sir, can u help me with my problem? i want to pass a php variable to popup function. ex. popup(‘popUpDiv’,$row[subject_id]), how can i pass that variable to popup function, when i try to pass that, it becomes error, and i want to retrieve that as php variable again. this want i want to do. when i click edit link the popup will show with the designated subject id,subject code and subject description to edit.. i hope you will help me with my problem. thnx. pls email me.
February 27th, 2010 at 11:20 am
How tu make this popup without link? I mean popup open automatickly…
February 27th, 2010 at 12:08 pm
Patrick,
Could you email me a sample of how I modify the content of the popup? For example having an image in it or other html code? I’m a newbie at this stuff.
March 2nd, 2010 at 3:59 am
Thanks for the example!
March 3rd, 2010 at 5:27 am
Dear Patrick, thanks for this article and other content on your site.
I found that creating of multiple instances of the css-popup with unique ID’s, it’s best to just put the style inside the DIV tag. Especially on pages that are generated dynamically.
March 11th, 2010 at 1:16 am
Is it possible to have a scroll bar in the pop up if the content exceeds the size of the boundaries?
March 13th, 2010 at 9:25 am
Hi there! Great script! Love it…
I’m having a slight issue with it though in IE8 – darn internet explorer – always the issue!
There are a few issues which you can view in IE but not FF – some I can correct once i do some research – but my main issue that when the pop up comes up, in IE the background under the pop up, goes completely to the background-color, and you cannot see the faded website – but you can in FF.
The website is http://www.citysidesports.com – NOTE: I have this on a body onload, and my php is recording IP in database so that this will pop up once only!
March 24th, 2010 at 12:44 pm
hi, i am developing a billing system using php…hmmm, i planned that when i input the amount paid(in a textbox) i wanted it in a form of popup using css instead of new window. can u help me? i tried ur code shown here, but my problem is, i cannot move the popupdiv to the left side. please help me…tnx
March 27th, 2010 at 9:21 am
can u pls say is it support to Crome
April 22nd, 2010 at 5:28 pm
I’ve put the html code below on a website to close the css-pop-up by clicking anywhere. This is great for making a (one-time only) announcement to your visitors.
into:
[x] close
April 22nd, 2010 at 5:38 pm
Hmm.. can’t post HTML here..
In addition to my previous post, I added onclick=”popup(‘popUpDiv’)” to the blanket and popup divs.
April 29th, 2010 at 8:46 pm
Thanks for the tut, client requested ‘i-Phone friendly’ gallery and this solved the solution well.
April 29th, 2010 at 8:48 pm
Err duh, solved the problem well … =P
May 5th, 2010 at 5:00 pm
I was able to adjust the positioning of my popup, however the blanket disappears now. Any suggestsions?
May 5th, 2010 at 5:03 pm
Ne’rmind, figured it out
May 6th, 2010 at 1:15 pm
I want to also have the CSS popup appear automatically when the page is loaded. Do I just play around with the onload ability? Has anyone done this?
May 17th, 2010 at 2:40 am
[...] Click Here To Find Out How To Do This [...]
May 18th, 2010 at 5:18 pm
I don’t found any solution for Body Onload here… pls help, my programming skills getting rotten…
May 24th, 2010 at 2:21 pm
code much appreciated, thanks
May 25th, 2010 at 11:40 pm
Just what I needed.
Thanks and hails from Mexico!
May 26th, 2010 at 8:48 pm
[...] Image Popup without opening a new window using css As I said in my previous post I don’t like the window feel and look of an image pop up, there are so many cool pop ups which don’t have that look. So today I was searching to find something simple and nice. I came across this nicely written article : How To Do a CSS PopUp Without Opening a New Window [...]
June 8th, 2010 at 6:39 pm
hey patrick great stuff. any ideas why once closing the popup, the sound from the video keeps playing, if closed before video is completed?
June 11th, 2010 at 1:24 pm
Hi! Cool script, and needed! I have a very long page. The link is in the middle of the page, and when clicked, it takes in the top of the page, but the popup is in the middle. So you have to scroll down very long to find the popup. Is there anything I can do? It would be cool if the link wouldn’t move the visitor to the top of the page.
June 16th, 2010 at 10:53 pm
I was able to start this pop-over with the onload=”" syntax. This way, it will pop up automatically when you load the page.
But… is there a way to make it self closing? let’s say, after 5 or 10 seconds?
I tried to call the same function with this clause, but didn’t work:
setTimeout(“popup(‘popUpDiv’)”,5000);
what I think is that I called it again, but it remains until you close it manually.
Can it be done?
I’ve looked a lot all over, but can’t find an answer.
Thanks in advance to anyone than cah help.
June 18th, 2010 at 4:16 am
Hi,
I am trying to implement something similar to what you have done.
Here’s my scenario.
There is a hidden div in my page (which i toggle to visible on click of a button)
Inside this hidden div i have placed another div which contains some info i want to display as a pop up.
When the button is clicked, I want the background to become translucent as you’ve done.
the problem I encounter is that when I try to do what you’ve done, even the hidden div comes under the “blanket”, and thus I am not able to separately see the popup.
Please help!
June 18th, 2010 at 6:43 pm
Thanks very much for this Pop-up effect. Unfortunately, this is not effective for keeping the pop-up in “view” of the user. Since it is CENTERED to the “SCROLL” of the page, long pages place the pop-up out of view.
Can this be modified to simply place it at an exact location in relation to the screen size? Or just having it appear at the top of the web page?
I am not quite sure how to do this, so any advice would be great!
Thanks again.
June 26th, 2010 at 6:59 am
Hi, there are a lot tips like this! But nothing as simple as yours. Very thanks for this useful post
July 2nd, 2010 at 7:15 pm
hy I’m a little confused. I know I haven’t worked yet with css, and i’m really novie but please somebody could tell me where to copy the css part exactly? and where to put the html code to make it work. I’m using dreamweaver CS5. thank you in forward, regards ato
July 14th, 2010 at 2:14 pm
to have centered vertically, change lines:
popUpDiv_height=blanket_height/2-150;//150 is half popup’s height
popUpDiv.style.top = popUpDiv_height + ‘px’;
TO:
var y = 0;
if (self.innerHeight)
{
y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
{
y = document.documentElement.clientHeight;
}
else if (document.body)
{
y = document.body.clientHeight;
}
myHeight = (y / 2) – (300 / 2); //300 is popup height
popUpDiv.style.top = myHeight + ‘px’;
July 16th, 2010 at 11:58 am
Thanks a lot Pat. You are a legend
July 16th, 2010 at 2:35 pm
Hello,
Is there a way to have the blanket and/or popUpDiv fade in smoothly? I tried using a jquery fade effect, but was having some issues making the the pop up and fade work together. Thanks. Great Tutorial.
July 18th, 2010 at 1:54 pm
Great script! Thanks!
I’m just trying to figure out how to dynamically resize the blanket, when someone resizes the window (downwards).
July 22nd, 2010 at 5:42 pm
Hi James, I would also like to know…. I am building a mysql/php site and need the blanket to resize to over 8000px … I have tried with getting the height of the container div but then the next problem exists putting this into php variable …. hmmmm
If your site is html/javascript then I have a tip. After the Body tag ……. You can get the height of that container and resize the blanket….
July 23rd, 2010 at 5:42 am
I found a way to make it work James.
July 28th, 2010 at 4:38 am
Hi,
Thanks for your great scripting.
I am trying to use it on my portfolio, the only problem is that my whole website is contained on one big horizontal scrolling page.
I’m not used to Javascript but I noticed that the coding was using the vertical scrolling position.
Do you know what I can replace in the code so that it takes in consideration the horizontal scrolling instead ? I don’t have vertical scrolling at all.
Thanks a lot.
July 28th, 2010 at 7:25 am
I got the blanket to automatically resize to stay 100%… the main difference I think was I needed to put 100% height in the body properties before putting 100% height in the blanket properties.
body {
height:100%;
}
July 31st, 2010 at 11:52 am
Great code!
Can I also use it to make a popup image gallery? Like: when you click an image, the popup opens and within that popup you can see more images, using ‘previous’ and ‘next’ buttons/links. I don’t know if it’s possible to switch between pictures within a div.
July 31st, 2010 at 12:50 pm
Yes Joane you can…. Basically you must almost everything these guys wrote
… Just use normal divs…
July 31st, 2010 at 4:51 pm
Thanks Richard, I’ll just give it a try!
August 11th, 2010 at 2:49 am
Thanx yaar
August 12th, 2010 at 2:24 pm
Thanks for posting this! Makes it so easy to add popups to websites for us non-techie folks. You’re awesome Mr. Burt.
August 13th, 2010 at 8:30 am
Excellent job. Perfectly it is working. Hats off.
August 17th, 2010 at 8:01 am
Excellent post. Many thanks.
August 18th, 2010 at 10:22 pm
Awesome code! Thanks for publishing it!
August 23rd, 2010 at 10:42 am
is there any way to fix the popup in a permanent position in the middle of the page? command position: fixed works, but puts the popup down at the bottom halfway hidden by the bottom of the page
August 26th, 2010 at 5:24 pm
Hi, I am using your awesome popup script for a YouTube video which I set to autoplay when opened. Your code is working great but I was wondering if you have any advice for me regarding my video – it keeps playing even after I click the close button, but only in IE. In Firefox when I click the close button it also stops the video. In IE you can still hear the sound from the video playing in the background even though the div that the video is in is no longer visible. Do you know how I might be able to solve this?
Thanks!
September 1st, 2010 at 5:56 pm
Hi,
How can you get the popup window to follow you as you scroll? Or, at the very least, to pop up in the center of the window no matter how far down the page you’ve scrolled?
Right now what happens is that if I have a very long page, the popup div will appear in the middle of the page, it isn’t relative to where you are on the page.
Please let me know if there’s a fix,
Thanks!!!
September 1st, 2010 at 6:09 pm
One more thing… I’ve noticed that the blanket does not go over iframes on IE. Is there a way around this?
September 1st, 2010 at 6:13 pm
Don’t use iframes. Ever.
September 1st, 2010 at 6:24 pm
Well in my situation I don’t think I have a choice… Anyway, forget my original post it doesn’t matter all that much if the popup follows you as you scroll.
Fixing the blanket over the iframe on IE8 is pretty key though…
September 2nd, 2010 at 7:53 pm
Thanks for the script/code. Is it possible for a user to close the window with EITHER the close link OR hitting escape? Thanks!
September 17th, 2010 at 9:26 pm
Hey Patrick
Thanks again for sharing the script.. Script works great. using it without issue. Only thing is I wanted to have the pop-up work with a (on-load) instead of on-click with a timed delay.. any ideas for this?
Thanks, John
September 17th, 2010 at 11:08 pm
Is there a way to self close this popup after a certain time? I want to show some information, but I think most start popups should close themselves after a few seconds; and that’s precisely what I want to get. Can it be done?
I thank you in advance for your help.
September 22nd, 2010 at 3:49 pm
This is a great tutorial, thanks. I’m new to web design but I think this tutorial is what I am looking for. I’m basically trying to figure out how to do what Joanne posted (July 31, 2010), in the simplest manner. Specifically, I found this great website
http://www.ericlysdahl.com/interiors-bedrooms.php
where when you click on an image a popup comes up but it’s not a new window (I’m pretty sure this is the same as you are teaching us here). Any thoughts if this is developed using what you are teaching here, or is this some sort of image viewer popup (if that is even possible), flash, or something else completely?
September 25th, 2010 at 3:10 am
Thanks for the script!
Like John I am also interested in knowing if there is a way to have it popup onload
September 30th, 2010 at 6:15 am
Hello, i’m not a flash designer so the code is a ? to me. haha. I’m going to learn it though.
So i don’t know how to link it, kind of looked other sites and this is what i’ve got.
var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);
so.useExpressInstall(‘expressinstall.swf’);
so.write(“flashcontent”);
::Skillet | Home
Click Me To Close
Click Here To Open The Pop Up
I know it’s not right because it doesn’t open in a anything when i click it.
I’ve got the java script u gave me saved as a js file.
Email me what to do, thanks for your time!
September 30th, 2010 at 6:17 am
umm idk why it didn’t put everything down but just to make sure,
var so = new SWFObject(“movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);
so.useExpressInstall(‘expressinstall.swf’);
so.write(“flashcontent”);
September 30th, 2010 at 10:01 pm
[...] please post the requirements here and we might be able to help you with a more suitable script How To Do a CSS PopUp Without Opening a New Window __________________ Feel free to thank people if they help you by clicking thanks at a post. [...]
October 4th, 2010 at 7:35 am
Hi Everyone,
I have a web page and one more small page(pop up page) , i want to display this small page on the top of the big page for this i have to write some JavaScript but i am not able to find how to do it.Please suggest me or give some solution.
Thanks In Advance
October 4th, 2010 at 8:08 am
Hey guys this is very helpful good job.
I need a popup. when the page open only the popup has to appear and it has to move from left to center. i already have the popup and its going 2 backside of the header part.
is there any solutions for this ???
thank u.
October 13th, 2010 at 10:05 pm
[...] Click Here To Find Out How To Do This [...]
October 17th, 2010 at 1:59 am
Hi !
thank you so much for this amazing script. i have modified it and it works fine on my “local” computer on both IE and FireFox.
BUT, I have a problem!!!!!
I added the popup(‘popUpDiv’) to the onload even of the BODY tag so that I can get the popUp show as soon as the page loads. This worked fine on my local computer. However, when I uploaded it to the server and let my friend connect to it, the Blanket did not fill the entire page and the popup was not centered. BUT, when you hit REFRESH, everything works fine! this happened on both IE and FireFox.
It seems that this has to do with the the script not detecting the size of the display when it first loads.
How can I solve this problem??
Thanks so much
October 17th, 2010 at 11:44 pm
hi my website is offline but thanks for this jquery popup it fits mys site perfectly
October 20th, 2010 at 9:31 pm
Hi,
Thank you for this code, it is exactly what I need for my site.
I probably have the dumbest question of all. I haven’t seen another comment about this problem.
do I put the .js file in a folder seperate or do I put the .js code on the .html page?
How do I make it work. I have the link opening the page I want to appear as the pop but the pop nor the blanket are appearing at all.
How do I link this code to the .js file? i guess is the main question here. What do I need to title my .js file to make it work.
Please use very simple laymans terms as I am only new to webdesign.
Thank you
October 25th, 2010 at 6:34 pm
Hi all,
I was working on a site and used the popup script so just thought i would post my modded one .. i didnt like how much code it had so i did it a simple way .. works in all browser… thanks to the guy who first made it .. nice bit of code
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:fixed; /* <– changed position from absolute to fixed */
z-index: 9001;
top:0px;
left:0px;
width:100%;
height:100% /* <– added height */
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
}else {
el.style.display = 'none';
}
}
function popup(windowname) {
toggle('blanket');
toggle(windowname);
}
October 25th, 2010 at 6:38 pm
The above code i posted 1 part is the css and other is js i forgot to space them sorry
css
—————————————————————————-
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:fixed; /* <– changed position from absolute to fixed */
z-index: 9001;
top:0px;
left:0px;
width:100%;
height:100% /* <– added height */
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
js
—————————————————————————————–
function toggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
}else {
el.style.display = 'none';
}
}
function popup(windowname) {
toggle('blanket');
toggle(windowname);
}
October 27th, 2010 at 2:24 am
thanks pat, very nicely explained and very useful
November 10th, 2010 at 8:41 pm
Hello…was looking for a popup to display a php form… found yours and your explanation seemed easy, but I cannot get it to work… I am NOT a coder by any means, and barely understand css…. Idon’t understand where to put the js info, or if in another file, how to link my html file with the js file, and where to put the various parts. My css appears just under my Head tag on my source code page. I use a template with header, footer, and main content in Dreamweaver cs4. So please tell me where to put your various parts, and what do I do with the actual js code… separate file? If so, how do I attach to my page? Help!
November 11th, 2010 at 6:49 am
Thanks,
It saves my time.
November 12th, 2010 at 4:02 pm
Ai yi yi! Sorry, I didn’t know the HTML would not show as text.
KATE: I linked the javascript file to my page. You do this with a script line inside the HEAD of your html document. It looks something like this:
script type=”text/javascript” src=”../../../../scripts/csspopup_edit.js” /script
(Place around script and /script).
Just replace the src= part with the actual path to your javascript file.
Also, you place whatever you want to appear inside the DIV for popUpDiv. Mine looks like this:
div id=”popup1″ style=”display:none;”
img src=”../../../../images/ou-calendars/2011/front-cover.jpg” width=”792″ height=”612″ alt=”Front Cover of Calendar” /
a class=”action” href=”#” onclick=”popup(‘popup1′)” Click Me To Close /a
/div
(Again, enclose each line in . I had to strip them out so you can see the code as text.)
Click Me To Close
November 15th, 2010 at 4:28 pm
hey !
i would like to know how can i have multiple images, each one displayed at 1 time, and hv a button to go forward or backwards.
tyvm !
November 17th, 2010 at 4:14 pm
Is there something special i need to do with a .mov file? when i try just by linking the file like i would regularly i get the pop up but then a little while later the .mov file loads up as if it was a new page.
November 17th, 2010 at 11:04 pm
Nice code Patrick! Thanks for make it public.
November 18th, 2010 at 11:59 am
Hello,
Love your script! Thank You!
I have used it in an interesting way to display 2 different virtual tours.
I have 2 instances of the applet on the same page.
The script works perfectly in FireFox, Safari and Chrome.
My issue is that when I click to open the popup using IE8, the blanket and popup work but only momentarily flash on screen then it’s gone.
What do I have to fix so this page also works using IE8 ?
Thank you again for your script and your help.
Kent
December 4th, 2010 at 4:04 pm
Hey!
This has been an extremely useful tutorial. I really appreciate you taking the time to post this, and give feed back. My questions pretty straight forward:
I’d like to position the popup, but all my attempts have failed. I set position to absolute, but no luck. Any suggestions?
Also, on a side note, I didn’t want to use the “blanket” effect, so I set its opacity to “0″. Was this the right thing to do in your opinion?
Thanks again!
December 5th, 2010 at 5:48 pm
I use your script on my website.
I have a Iframe in the Div container to show a site in it.
How can i give the Iframe in the Div another source without making more instances of the div?
The Div should not be changed, i only want to change the iframe src in it per link.
please help me.
December 15th, 2010 at 6:17 am
Hi Patrick I sent you a question via email regarding your nice bit of code but i am having some trouble implementing it in a site i am doing. My email may have gone through your junk mail.
there should be a copy of the page attached.
Help p-lease
Martin J.
December 16th, 2010 at 12:49 am
When you open the popup, the blanketed window automatically scrolls to the top. Is there any way to keep the scrollbar wherever it is on the page when you open the popup?
Other than that, it works great.
Thanks.
December 16th, 2010 at 1:03 pm
Hi
The code worked except one thing. Click Me to Close is showing on the page itself from the very begining. Its not coming on top of the popup window. Please suggest.
December 17th, 2010 at 5:07 am
Can i make a login window with username,password,new user and forgot password links using this code?
December 20th, 2010 at 4:21 pm
Thank you for sharing this script, it saved my time!
December 21st, 2010 at 8:20 am
[...] Click Here To Find Out How To Do This [...]
December 31st, 2010 at 1:25 pm
Hi, just saw your page today. Wanted to know, can I turn off the blanket part and still get the pop side to work. Are they related in any way cos the graphics I have, expects my pop-up to hang on another graphics without disturbing the previous surroundings.
January 4th, 2011 at 7:03 am
I want to call a .jsp page to the popup div.
So Can you say me the code how to modify. So that i can call a .jsp page.
i had changed the
courses
Courses
to
courses
Courses
January 7th, 2011 at 2:15 pm
Works great. However, would like to put a php form in the pop-up. Can anyone drop a comment on how to do so?! Greatly appreciated.
January 12th, 2011 at 7:21 pm
Briliant work!
In order to get the popup to appear in the middle of the window after the window has been scrolled down:
Add the following two functions:
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
And then remove the line:
popUpDiv_height=blanket_height/2-150;//150 is half popup’s height
And add the lines:
popUpDiv_height = f_scrollTop() + viewportheight / 2 – 150; //150 is half popup’s height
Credits to : http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
January 13th, 2011 at 11:09 am
okay is there a way to were, i can open a sized down webpage in it, instead of an image?
January 13th, 2011 at 11:10 am
a .html file to be exact.
January 20th, 2011 at 3:05 pm
Was able to put php form in the popup and works great as long as you follow the directions. However if you miss a required field and hit submit button, pop-up closes and fails to show the message indicating this field is required. Subsequently when you open the popup, show the message. How do I prevent it from closing the pop up and displaying the error message the first time? Any suggestions?
February 8th, 2011 at 7:01 am
I was told by a programmer that the csspopup has alot of difficult coding and it contains javascript so he never thought it to me
I would love to show him that i did it the simple way thanks to you Patrick (”,)
Though im still trying to figure out how to add a close option (X) on the image
Perhaps you could help me out with this, please reply via email
Thanks alot Patrick
February 17th, 2011 at 9:25 pm
Patrick,
Your code has worked wonderfully. Thanks for sharing it.
I have an issue and wondering if you could perhaps shed some light on this for me.
I am using these hidden DIVs inside a Database loop. Within each DIV I am using iFrames where I pass variables to a window to display specific content for each link.
The issue I’m having is in order for each iFrame to display the correct info the Div wrapper must have a unique ID, otherwise the browser will just publish the final iteration of the DIV.
I can create the DIV names dynamically, but then the Javascript won’t work, because the javascript requires a pre-known DIV name that I can’t know beforehand.
If you can shed light on this I would really appreciate it.
Best
Marc
February 24th, 2011 at 9:20 am
Patrick you are awesome! Thanks for positng this.
February 27th, 2011 at 8:42 am
How can i change it to make the pop-up show up without having to click on it. Every time i open the web page the pop-up will show up .
February 27th, 2011 at 10:53 am
solved that problem how can i add an image or text in the pop-up ?
March 2nd, 2011 at 1:22 am
How to open a url or a file (excel / image) in the popup ? where should the url to be given ? Tried giving in the of the Click here to open.
March 2nd, 2011 at 4:48 am
Hello richard!!
i’m having a problem on how to make an image as a popup window…
can you show popup window just like you showed above using css???
does is use the same coding that you have showed above..??
actually i am not good in web designer so i am trying to learn and discover on how to fix out the problems..really need your help..
please and please..
March 2nd, 2011 at 4:49 am
sorry for the name mistake…
March 14th, 2011 at 4:33 pm
Patrick, thank you for your solution. I spent for about 2 hours and it works!!! Thank you! But, I have a problem with displaying several such links/popups on a single page. You recommended above to have “uniquely named DIV ID and to change the popupDiv to that new name”. I couldn’t solve that question. Did I change it correct (please see below)? The second pop up doesn’t work properly.
div id=”blanket” style=”display:none;” /div
div id=”popUpDiv” style=”display:none;”
a href=”#” onclick=”popup(‘popUpDiv’)” Close[X] /a
Text1
/div
a href=”#” onclick=”popup(‘popUpDiv’)” Click Here To Open The Pop Up/a
div id=”blanket” style=”display:none;” /div
div id=”popUpDiv2” style=”display:none;”
a href=”#” onclick=”popup(‘popUpDiv2’)” Close[X] /a
Text2
/div
a href=”#” onclick=”popup(‘popUpDiv2’)” Click Here To Open The Pop Up /a
What am I doing wrong?
Thank you.
(sorry, that was a second messages without tags so the code is displayed on the page as a text). Please remove the previous message.
Thank you.
March 17th, 2011 at 5:28 pm
This code is great! I learned a ton and it’s fairly simple. My problem is this: Internet Explorer. In IE the blanket shows up darkening the main page, but the popup doesn’t show. I have a Mac and the coding works great in Safari, Chrome, and Firefox. Since I don’t have IE, I can’t debug in it easily. Which CSS attributes are vital for IE to display this properly? I changed the CSS slightly so that I could popup multiple DIVs. I switched the popUpDiv id to a class in my CSS file as such:
.popUpDiv {
position: absolute;
background-color: #CEDDEE;
width: 600px;
height: 400px;
z-index: 9002;
padding: 0px;
margin: 0px auto;
border: 2px solid 772222;
}
(the #blanket remains as is)
What would need to change for it to display properly in IE?
Thanks,
Chris
March 21st, 2011 at 12:42 pm
Nevermind. I figured it out. It’s in the Javascript. Thanks for your great tutorial here!
March 25th, 2011 at 4:40 pm
I want the pop up div to push the divs behind it out of the way…see wonderwall.com, click a feature box and the popup comes up and pushes the other boxes aside…guessing its a css attribute?
Using masonry jquery for a page of clickable divs, want the popupdiv to open up which I have figured out with your help…now to make it better!
Thanks in advance!
March 27th, 2011 at 9:27 pm
How do I add a border to the pop up? I tried it with css and no luck. Any ideas?
April 1st, 2011 at 3:04 pm
hi patrick..
ur code works perfectly well…
but need a little help how place a link to another web int the popup window…
plz plz help me its urgent…
April 3rd, 2011 at 1:05 pm
all good info. but for us dummies….. where do all these codes go. are they all placed on the page your want the popup? do you need to make another doc to point to? where do i change the content of the popup?.
what lines fo the code do i need to change to get it to point to the info i want on my web site.
looks like a good code, but for us newbies not enough info as to where all this needs to be placed in ones own files structure.
April 6th, 2011 at 4:41 am
Hi,
first of all thanks for sharing the code. Helps me a lot. I’m testing it right now, works great in Chrome and FF, but it doesn’t work in I.E.? I have the old I.E. 6 installed on my comp, I haven’t tried another version.
If it’s true, how to put a workaround code for I.E. users, so that it pop-ups into blank window?
Thanks a lot.
April 9th, 2011 at 1:30 pm
Hi, there are a lot tips which is i search! But nothing as simple as yours for me. Thank you for your great post.
April 12th, 2011 at 6:44 am
hi, i can’t make it work..
actually my website is made in parts say header content and footer,everything is a different file attached via PHP include function so the link for the popup must me be in header file and the page which i need to popup is another file?
sorry but i am total a n00b with CSS i usually do PHP only.
April 12th, 2011 at 8:07 am
ok solved it
April 13th, 2011 at 5:48 am
Hi
I’m trying to test this on compatibility trhough the program IETester but the opacity isnt working in IE6?
Or is this just a case of the software displaying it wrong (never had a problem before)?
Thanks
April 15th, 2011 at 3:25 pm
thx for the sharing
how can i put a text not a background ?
April 18th, 2011 at 4:59 pm
Great Code! What can i modify in the Javascript to make it work with CLASS instead of the ID in the divs. Also, Is there a way to make the links in the pop-up be added to the tab order, in other words adding focus to the pop-up links with the tab key.
April 21st, 2011 at 10:04 pm
I was playing with the JavaScript, I changed it as little. It helps me center the popupdiv.
function popup(windowname,Height,Width) {
var windowHeight = Height/2;
var windowWidth = Width/2;
blanket_size(windowname,windowHeight);
window_pos(windowname,windowWidth);
toggle(‘blanket’);
toggle(windowname);
}
added width and height of popup
add to function onclick popup(‘nameofwindow’,’600′,’600′)
so that when the function is run is with div size and center properly. remember to add it in the close function as well.
sorry if the has already been talked about.
April 23rd, 2011 at 12:49 am
Man you are amazing, thanks for the code…
April 29th, 2011 at 7:33 pm
It seems to be very useful. Can it work with chrome?
May 5th, 2011 at 8:49 am
Pop-Up por cima do FLASH !!! (SOLUÇÃO)
SOMENTE ACRESCENTAR OU MODIFICAR OS WMODE PARA TRANSPARENT, COMO ESTÁ ABAIXO:
AC_FL_RunContent(
‘wmode’, ‘transparent’,
);
ABRAÇOS
May 11th, 2011 at 5:03 pm
Grazie!Ottimo codice!
Greetings from Italy! Really thanks you!^_^
May 13th, 2011 at 10:06 am
Hi
I have been scrolling through the comments and cannot find a solution.
I am using IE8 and the popup works great except my page is long and some links you have to scroll to get to. When you click for the popup it returns the page to the top then displays the overlay and then when you close the popup the main page remains at the top.
I need to modify the code to have the popup appear in the scrolled position without the main page moving, and then be able to close the popup without the page returning to the top.
I have seen some posts on this but none of the solutions above appears to work for me.
Any help would be greatly appreciated.
May 24th, 2011 at 10:37 pm
Hi, wonderfull work, But I need some help, How can I insert into the popup a HTML file, or even better a html table?
thanks
May 26th, 2011 at 6:11 pm
Hi There, I have a flash file that I want to display in the popup your code works fine and I click an image and the ‘popup’ opens and the flash file loads however I have no way of getting back to the page below.
any ideas?
Thanks!
May 31st, 2011 at 6:48 am
Hi,
Nice script.
I would also like to know if I had a minimize button on the pop-up,how would I write script for it?
Thanks in advance
-Chandrika
June 1st, 2011 at 6:31 am
Very nice script. Simple and easy! Bravo!
I lost my other night trying to work with a more complex modal, when i had it all here.
Thank you!
June 2nd, 2011 at 7:09 am
[...] How To Do a CSS PopUp Without Opening a New Window i am using the code fom above for popup div but getting error object required in IE & [...]
June 6th, 2011 at 6:01 pm
Thanks for publishing this. Saved me lots of time.
June 8th, 2011 at 2:36 am
A simple and elegant solution.
Any idea how I would get dynamic text into the pop-up (I want to keep just one) based on some parameters sent from PHP to mySQL?
June 9th, 2011 at 6:43 pm
I’m trying to start my website with this popup rather than having to click on a link for it to popup.
I viewed the answers above, but when I remove the display:none from the DIV containers (blanket and popup) the popup appears at the upper left corner and the blanket dose not appear at all.
Any ideas how to do it?
June 10th, 2011 at 3:51 pm
I’ve read through every comment and have tried mutiple things -
Does anyone know how to CENTER the div on the screen and NOT on the page?
As other have said, my page is also pretty long and pop up loads in the middle of the
page, forcing users to scroll down to see it.
It’ll be extremely helpful if I could align the popup where they can see it whenever
they click on the link.
June 12th, 2011 at 8:27 am
[...] Click Here To Find Out How To Do This [...]
June 15th, 2011 at 1:45 pm
I just want to thank you for tposting this. I now look like a rock star!
June 15th, 2011 at 1:47 pm
amoore89: I only used one single popup, so I just changed the top and left margins for the popup div to get it centered. I don’t know if there is a better way, but it worked for me!
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
margin-top: -300px;
margin-left: -339px;
position: absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
display: block;
}
June 23rd, 2011 at 5:33 pm
Hi,
I am also including php in my website. I wanted to know basically, if this is compatible with your codes, and what, specifically, the “#” is for in the href section. can i say, add to it for a $_GET[] call so the “pop-up” can have text from a database show up? I tried reading through all of the comments but there are just so many different comments.
If someone has asked this already, if you could direct to that line?
else,
This is what i am more or less, trying to do.
<a href="#?q=” onmousedown=”popup(‘popUpDiv’)”>
Thanks,
Captnbirdman
July 10th, 2011 at 6:52 am
Thanks Partick, this is exactly what I was looking for to use on my portfolio.
July 12th, 2011 at 9:02 pm
Hello Patrick ,
Thanks for sharing your script. I’m doing a web site right now but I’m still lost on how to pisition the Div box. I want to use image as icons so when people click, it opens the pop up windows. Due to the icons are different shapes, can i use map to create links? And do you know where i can reposition the pop up window? Do you mind i send you the files so you know what i am talking about? I really appreciate.
Thanks in advance.
Tzu
July 15th, 2011 at 10:21 am
Its a great post..helped me a lot …Thank You Very much
July 17th, 2011 at 3:12 am
Thanks a million for sharing this great script…
I was looking exactly for this.
July 18th, 2011 at 8:44 am
Hi,
It is not working for me. The Opacity and filter have a red underline (I use Web Expression 4). When I go to test the page, I click and nothing. When I scroll down and then click, it scrolls back to the beginning.
What do I do? the coding can be found at the website I have. click on my name in this comment for it.
Thank you very much.
July 18th, 2011 at 9:49 am
Hi,
I figured the problem out for why it would not work. I did not copy the file to the js folder on my site
Now my only question is: How do you fix it so it does not keep scrolling back to the top? You click on the link and it makes the page move up to the top and same with when you click on the “click to close link”.
Thank you.
July 20th, 2011 at 6:23 am
Hi,
I have placed some textboxes and one button control in this PopUp ..Now I want to save these values when clicking on the button control……………..
Please provide the solution
July 20th, 2011 at 10:28 pm
Hi weird question but maybe it’s worth a shot.
Is there any way to do this so that it doesn’t load every time the page is loaded, but rather say once every week, or once every fifth time the page is loaded? I’m intending to use the removing the ‘display:none’ to achieve automatic popup technique mentioned above.
Thanks!
July 23rd, 2011 at 7:22 pm
Wow, great code!
Thanks for letting others use it freely. Definitely going to revisit!
Josh
July 27th, 2011 at 4:13 am
Hi, the script calculate top position wrong. Left position may be changed too (without static numbers).
I have changed you function with using with jQuery:
function blanket_size(popUpDivVar) {
var popUpDiv = document.getElementById(popUpDivVar);
var wh = $(window).height()/2;
var ws = $(window).scrollTop();
var dh = $(‘#popUpDiv’).height()/2;
var popUpDiv_height = wh-dh+ws;
popUpDiv.style.top = popUpDiv_height + ‘px’;
if (typeof window.innerWidth != ‘undefined’) {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById(‘blanket’);
blanket.style.height = blanket_height + ‘px’;
//var popUpDiv = document.getElementById(popUpDivVar);
//popUpDiv_height=blanket_height/2-$(‘#popUpDiv’).height()/2;//150 is half popup’s height
}
July 28th, 2011 at 10:03 am
Great code!
Just I want to thank u for your post, helped me a lot!
July 29th, 2011 at 1:56 am
Hi, if you dont mind me asking. can you pass information from the pop-up back to the original screen?
August 1st, 2011 at 1:14 am
It helped me in my project. Thanks for sharing this.
August 8th, 2011 at 2:05 am
Hello Patrick, great code here. I tried including unique ID’s in the css rule so as to achieve multiple popups with different links but I keep getting the same content. What am I doing wrong? Please advise.
August 13th, 2011 at 11:34 am
Hi Patrick,
Thanx for your code! Slightly changed it. Wanted to close the Popup when clicking on the blanket.
Used JQuey to set the onclick event of the blanket.
To do this :
Get this JQuery include file (free) and include it before including the other js file:
Add this small piece of Javascript at the end of csspopup.js:
$(document).ready(function(){
$(“#blanket”).click(function() {
popup(‘popUpDiv’);
return false;
});
// other load stuff can be done here as well -> works better than the doy onLoad
});
August 16th, 2011 at 6:45 am
many thanks, great bit of script. I’ll use this many times I think.
August 24th, 2011 at 7:36 pm
Excellent post. I was checking continuously this blog and I’m inspired! Very useful info specially the ultimate part
I care for such info much. I was looking for this particular information for a long time. Thank you and good luck.
August 28th, 2011 at 7:31 pm
This is a fantastic bit of scripting
With the help of some of the comments in the script and the replies on this blog I finally understand its basic mechanics.
September 1st, 2011 at 12:33 pm
Hey very usefull script, for people that want to know how to make the popupdiv scrollable just set a specific height and make overflow:scroll; on the css of popupdiv
September 2nd, 2011 at 9:53 pm
Hi, thanks for the script, Just thought I’d share my edits, I made a way simpler version based on yours, but without that big JS script
body
{
margin: 0 auto;
}
#blanket
{
background-color:black;
opacity: 0.50;
filter:alpha(opacity=50);
position:fixed;
z-index: 9001;
width:100%;
height: 100%
}
#popup
{
position:fixed;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
margin: 100px 450px;
}
Open popup
Close
September 10th, 2011 at 5:43 pm
Hello, I love the script, and I’ve actually been wondering how to do this for a while. After some experimenting, I got it to work for making two different windows popup.
Now, here’s my dilemma:
One of the windows that pops up is a signup window, and the other is a login. At the bottom of the signup div, there’s a link (ahref) that says “If you already have an account, please login.”, and a similar one on the login popup div.
When the user clicks the link, I want to be able to close the current div (signup) and open ‘login’ while still keeping the blanket.
I created a custom function, poptoggle, but I have been trying for about half an hour and cannot seem to get it. Any help is greatly appreciated.
If you didn’t understand me, check the “website” field in this comment and it will be there.
Thanks.
September 13th, 2011 at 3:09 am
Hi Patrick,
Thanks for the excellent script, quick question though, im using this on one page of the website im building for work and its going to be used 5 times in total on different sections of the page, can you shed some light on how i can achieve this without having mutltiple javascript files, well a total of 5 to be honest…..any help with be highly appreciated.
Thanks
Scott
September 13th, 2011 at 4:46 am
Sorry wrong email on the other comment
September 20th, 2011 at 8:57 pm
Hello Patrick.
I spent 2 hrs reading thru all the comments before posting. Have learned basic CSS & html but not java yet. Looking for good method to list 30+ cakes on a page. Want user to click on name (eg Mud Cake) & have a pop-up window display pic. I had thought I found the perfect answer, but then I think a couple of posters said this method loads ALL the pics in the background, thus slowing down the page load time, correct? Seems no answer to this problem has been posted.
I need the page to load quickly. So can someone help with a sample script / method pls?
September 25th, 2011 at 11:41 am
thanks for nice script.
is it possible to open a popup inside a popup.
please replay
September 26th, 2011 at 11:20 am
Thanks for the code! It would great.
September 28th, 2011 at 6:44 am
But how can it be used for image..???
Please give me example with coding.
October 7th, 2011 at 7:05 pm
Hi, very nice script. One question / comment. When the screensize is similar size to the webpage then the popup is centered correctly. But I found out that when the webpage is (e.g.) 5x taller than the browser window the popup is centered in the webpage and not the user window. Can this be changed? (of course I’m learning CSS et al). Many thanks
October 9th, 2011 at 5:27 am
Not working on wpm
October 9th, 2011 at 5:28 am
can someone tell me the code for wpm plz………………
October 9th, 2011 at 8:05 am
how can i give span in popup
October 11th, 2011 at 2:54 am
where can i get csspopup.js file?
October 11th, 2011 at 2:55 am
sorry, i found it
October 11th, 2011 at 3:11 am
great , it works but do you have other code like … when i have a side drame with 3 link when i click one of the link and the video and other link will slide out from the side with a slide?
October 11th, 2011 at 3:20 pm
I do not even understand how I finished up here, but I thought this submit was once great. I don’t realize who you might be however certainly you are going to a famous blogger for those who are not already
Cheers!
October 11th, 2011 at 10:15 pm
i have a problem , cause yr code is for one pop up screen link only , but if i have mutliple many icon which need to do the same time what should i add?
October 18th, 2011 at 9:53 pm
Thanks for this elegant solution. It works when I test it on your site but does not work when I copy all your code to my sample project. What am I missing. Please help.
October 18th, 2011 at 10:46 pm
Can someone please share how they might use this for a login form or nay other form for that matter.
October 20th, 2011 at 3:44 pm
You don’t need javascript to do this. Just set an anchor element that points at something like #open.
Then in your CSS
open:target {
display:block
}
October 30th, 2011 at 8:34 am
Thank you, I have recently been looking for information approximately this topic for a while and yours is the best I’ve came upon so far. However, what about the conclusion? Are you positive in regards to the supply?
October 31st, 2011 at 11:11 pm
This is a really cool piece of code…
I was just wondering if someone could educate me on how to set up a form on the popup window which then submits the information and displays it on the primary window?
Thanks very much in advance!
Luke
November 2nd, 2011 at 3:12 am
Hey Patrick! Great code – I was having that problem with the window not being able to place it. like the first question on January 29th, 2008 at 8:40 am. I tried the 2 code mods in page and in Js file but now it doesn’t work at all? Also if I could also ask can I just load an iframe in the div if i want scrolling?
Any help appreciated!
J
November 7th, 2011 at 4:40 pm
I think Patrick is on vacation.
But man! what a nice piece of code here.
Thanks alot Pat.
Peace!
Ludwig
November 8th, 2011 at 6:16 am
@Philip:
Thanx very much Philip. your code for centered popup even page scrolls down worked like a charm
November 16th, 2011 at 12:07 am
It?s really a great and useful piece of info. I?m happy that you simply shared this helpful info with us. Please stay us informed like this. Thanks for sharing.
November 17th, 2011 at 7:42 am
Great post. I used to be checking constantly this blog and I am impressed! Extremely helpful info particularly the remaining part
I take care of such info much. I was seeking this certain info for a very lengthy time. Thank you and best of luck.
November 18th, 2011 at 12:47 am
Sorry, code should read…
<a href=”#” onclick=”popup(‘popUpDiv’); return: false;”>Click Me To Close</a>
</div>
November 20th, 2011 at 2:26 am
thanks
December 1st, 2011 at 1:11 pm
how to remove the text: Click me to close?
and is it possible that pop up image go away when people clcik outside the picture?
please tell me solution
Thanks
December 5th, 2011 at 4:39 pm
hello!
i have tried to change the names to specify the separate divs i want but every time i change the name from “popUpDiv” to anything else the pop up doesnt work. i saw where you said i only had to change the div id and after onclick=”popup(‘#’)” and i did that but it just isnt working for me. am i missing something? thx!
December 6th, 2011 at 7:58 am
My brother suggested I may like this website. He was once entirely right. This publish truly made my day. You cann’t imagine simply how a lot time I had spent for this information! Thank you!
December 9th, 2011 at 4:02 am
Pretty nice post. I just stumbled upon your blog and wanted to mention that I’ve really loved browsing your weblog posts. In any case I will be subscribing for your rss feed and I’m hoping you write once more very soon!
December 13th, 2011 at 10:10 pm
Hi,
I found your nice popup
I am in an error, when I use it for and test page without anything then it work fine, but when I applied it to my site then when click to popup, yes it appear popup windows but it unload and back to home page after a second
Can you please help me to fix this error
Thank so much
December 14th, 2011 at 10:57 am
I have made a couple of *simple* changes to the script where it would improve a lot (to my view ofc):
1st:
Adding this code to the popup function will allow the “window/popup” to be always on center even after resizing:
window.onresize = function(event) {
blanket_size(windowname);
window_pos(windowname);
}
2nd:
changing this code on the window_pos function will allow the use of popups of ANY size:
popUpDiv_height=(viewportheight-popUpDiv.clientHeight)*0.5;
…
window_width=(window_width-popUpDiv.clientWidth)*0.5;
3rd and last (optional):
adding/changing this code int the blanket size function allows the pop up to be fixed , ie, no matter where you scroll it is allways in the center of the screen:
//’seeable’ size
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
if (document.body.parentNode.clientHeight < document.body.parentNode.scrollHeight) {
viewportheight = document.body.parentNode.clientHeight;
} else {
viewportheight = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=(viewportheight-popUpDiv.clientHeight)*0.5;
popUpDiv.style.top = popUpDiv_height + 'px';
December 14th, 2011 at 12:08 pm
for some reason I also need to use this code after changing the window onresize event:
setTimeout(“blanket_size(‘”+windowname+”‘);window_pos(‘”+windowname+”‘);”,1);
else the fixed position doesnt work. this is a workaround/patch if you debug my code please reply so I can fixed
thanx
December 14th, 2011 at 12:10 pm
Correction* the window positioning doesnt work! (it is still fixed but missplaced when the popup is called)
December 15th, 2011 at 6:01 am
Alin,
Unless you have programmed something to hide the popup other that user interaction (event, timeout,etc) your site may have a reload instruction or something of that nature that resets the page thus making the div invisible.
December 16th, 2011 at 1:53 pm
Hi all,
Does anyone know how to stop this div inheriting from above because currently the script only greys out the container and not the entire browser page?
Thanks in advance!
December 17th, 2011 at 3:57 am
t
December 19th, 2011 at 11:04 pm
I found your code and it works really well – thank you. Is it possible to run the code and temporarily stop the user from going to another page to allow them to fill out a survey on the page then redirect them to their other page?
December 20th, 2011 at 8:06 pm
is there anyway to make the popup close from clicking the blanket or transparent layer of the popup?
December 21st, 2011 at 11:43 pm
Thanks thanks alot Patrick Burt…….. it helped me.
December 23rd, 2011 at 11:43 am
Hello,
Is there anyway the pop-up image will be random each time?
ex. if there’re 10 images. i want to pop-up image that appears is random from that 10 images?
How i can?
December 25th, 2011 at 3:12 am
Unquestionably believe that which you said. Your favourite reason seemed to be at the web the simplest thing to take note of. I say to you, I definitely get annoyed even as people think about worries that they just don’t understand about. You managed to hit the nail upon the highest as well as outlined out the whole thing with no need side-effects , people could take a signal. Will likely be back to get more. Thanks
December 26th, 2011 at 5:27 pm
You really make it seem so easy along with your presentation however I find this matter to be really something which I think I might never understand. It kind of feels too complicated and extremely huge for me. I am having a look forward to your subsequent publish, I?ll try to get the hold of it!
December 27th, 2011 at 7:07 am
Woah this weblog is excellent i really like reading your articles. Stay up the good paintings! You already know, many people are looking around for this information, you can help them greatly.
January 1st, 2012 at 5:20 pm
Excellent stuff man – however in the changes you made above on Dec 14th, where specifically do they go and/or do you have an updated version of the js file with the changes in it already?
Also I am caught in a div situation where it grays out the parent div instead of the entire page…. Any clue on escaping that?
Thanks again
Tom
January 4th, 2012 at 7:38 am
Great article… Thanks a lot for sharing…
January 4th, 2012 at 4:32 pm
Hi there, I discovered your web site by the use of Google while looking for a related matter, your web site came up, it seems to be great. I’ve added to my favourites|added to my bookmarks.
January 5th, 2012 at 6:48 am
you are actually a good webmaster. The site loading speed is amazing. It kind of feels that you are doing any unique trick. Furthermore, The contents are masterwork. you have performed a fantastic task on this subject!
January 5th, 2012 at 11:18 pm
I am wondering why the popup window doesn’t work on my case. I follow all the steps on this tutorial. I just add a php file to the href tag and it turns out to load that page but not showing the pop-up window. There is no effect. Help please on how to work with this pop-up css
January 6th, 2012 at 11:45 am
I have the problem that when the user scrolls a long webpage, the pop-up appears out of view. I need to have the pop-up appear in the middle of the current view of the window.
Philip (and Vishal), I tried incorporating your code but it did not work. I get a syntax error for this line:
popUpDiv_height = f_scrollTop() + viewportheight / 2 – 150; //150 is half popup’s height
Also, you mentioned at the end of your post that there were multiple lines to change, but you only provided one line of code. Your help is welcome!
January 11th, 2012 at 4:05 pm
Hi!
Popup works fine, but i can figure out, how to pop up different images, or texts:
Like if we had 3-4 lines of “Click Here To Open The Pop Up” , and each of them opens a different image or text.
Could we manage to do it? Or is t very simple and i’ to tired?:)
Thanks!
January 12th, 2012 at 1:00 am
Hey thanks for the tutorial.
for some reason when I try and do this I get the error
Error: popup is not defined
Source File: file:///Users/Dale/Sites/SHOWREEL/video.html#
Line: 1
And for the life of me cant work it out!
January 15th, 2012 at 3:32 pm
I savour, result in I discovered just what I used to be looking for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye
January 16th, 2012 at 2:14 am
Hi there, is this such an awesome thing, have been looking for one for weeks.
i have 2 questions, how to i make it lie against the left side of the page, also i need the pop up to load as the page loads and i have read the comments that say delete the display none, but then it just opens the block by default top left and moves everythng else over. have inserted the code just after the body tag. thanks again.. its awesome
January 17th, 2012 at 3:58 am
Great post. I was checking continuously this blog and I’m inspired! Extremely useful info specially the ultimate section
I care for such information much. I was looking for this particular info for a long time. Thank you and best of luck.
January 17th, 2012 at 7:36 am
Wow, awesome job! Tried it and works like a charm.
Just one small question: is there any chance of making the pop-up window appear only on the first visit to the website? The site I’m creating has all of its main options on the homepage, and it becomes quite annoying having that pop-up appear every time I go back to the main menu.
All good other than that!
Thanks HEAPS.
January 18th, 2012 at 5:00 am
Simply desire to say your article is as amazing. The clearness on your submit is simply spectacular and that i can suppose you are an expert on this subject. Fine together with your permission allow me to snatch your RSS feed to keep updated with approaching post. Thanks 1,000,000 and please continue the enjoyable work.
January 21st, 2012 at 10:51 pm
It?s actually a nice and useful piece of information. I am glad that you simply shared this useful info with us. Please keep us up to date like this. Thank you for sharing.
January 24th, 2012 at 10:23 am
Whats up very cool blog!! Guy .. Beautiful .. Wonderful .. I will bookmark your website and take the feeds additionally?I’m satisfied to search out so many helpful info right here in the publish, we need work out extra strategies in this regard, thanks for sharing. . . . . .
January 24th, 2012 at 12:54 pm
hey thanks for the great tut i was looking everywhere for it and im terrible when it comes to browser coding. How can i make the popup load on start? if it is possible.
January 26th, 2012 at 4:26 pm
I just could not leave your website prior to suggesting that I actually loved the usual information a person supply in your guests? Is going to be again regularly to check out new posts
February 3rd, 2012 at 3:01 am
Thanks for the tips on credit repair on this blog. The things i would tell people will be to give up the actual mentality that they may buy currently and pay back later. As being a society all of us tend to do that for many issues. This includes getaways, furniture, in addition to items we wish. However, you’ll want to separate a person’s wants out of the needs. When you are working to raise your credit score make some sacrifices. For example you possibly can shop online to save money or you can click on second hand outlets instead of high priced department stores with regard to clothing.
February 5th, 2012 at 1:04 am
Awesome things here. I am very satisfied to peer your article. Thanks so much and I am taking a look ahead to contact you. Will you kindly drop me a mail?
February 6th, 2012 at 5:33 pm
hi
thanks for the code
but i have a problem with linking the Java o CSS can you please advice best what to name the files (Java Script File and the CSS file)
Thank You
February 11th, 2012 at 6:12 am
That is really interesting, You’re an excessively skilled blogger. I have joined your feed and look ahead to in the hunt for extra of your great post. Also, I have shared your site in my social networks
February 12th, 2012 at 1:43 pm
I’m trying to use multiple popups on one page. I tried just to use the original popupdiv div you use, but it only shows the first popup no matter what I click.
When I try to do custom div names, the black blanket will appear but the div will show up underneath the blanket and cannot be closed.
suggestions?
February 27th, 2012 at 5:35 am
very nice and easy to understand thanks
March 1st, 2012 at 6:53 pm
Pat, I was inspired by your idea. Here is a simpler way to use the JavaScript. I am not a JavaScrip guru either but we have to use it from time to time don’t we?
The whole code is below in three sections,… the css, javascript and html,… extremely easy and tested in all current FF, IE, Chrome, Safari, and Opera.
Enjoy!
// css – note that you must have the two opacity settings in the css as ie does not recognize opacity
but uses filter. Also the css with the link has a span inside a span. They both MUST be absolute and
the position must be defined even if it is 0px;
<style type=”text/css”>
.popup{
position:absolute;
left:180px;
top:180px;
width:132px;
border:1px solid #ccc;
padding: 5px;
z-index:2;
visibility:hidden;
}
.popup1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:1px solid #ccc;
padding: 5px;
opacity:0.55;
filter: alpha(opacity = 50);
background:red;
z-index:2;
visibility:hidden;
}
.popup2{
position:absolute;
left:10px;
top:10px;
width:300px;
border:1px solid #ccc;
padding: 5px;
background:white;
z-index:100;
}
</style>
the javascript to make it all work – very simple js – works whether you use
onClick or onMouseOver.
<script language=”JavaScript”>
function ShowPop(id)
{
document.getElementById(id).style.visibility = “visible”;
}
function HidePop(id)
{
document.getElementById(id).style.visibility = “hidden”;
}
</script>
the html code for both popups – note that the links are different and
in different palces for the two. The onClick requires the close link in the popup. The onMouseOver
has both close and open in the same link.
<a href=”javascript:void(0);” onMouseover=”ShowPop(‘demo1′);” onMouseout=”HidePop(‘demo1′);”>
Popup onMouseOver</a>
<a href=”javascript:void(0);” onClick=”ShowPop(‘demo2′);”>Popup Open</a>
March 21st, 2012 at 3:42 pm
Great lesson! Question… How would one auto-align this pop-up horizontally AND vertically to the viewport/browser dimensions… I’ve been mucking around with implementing that for hours with no luck.
March 25th, 2012 at 6:54 pm
Hey – This is a pretty old post, so I’m not sure if you’re still looking at it,
but–
I’m trying to do this with images… I have a bunch of images displayed in a horizontal line, and I want to be able to click on one and enlarge it just like your example.
When working with your code, crazy stuff happens, namely, there is no clicking, my images that i classed as popUpDiv displayed as big from the get go…
also, is the html you provided supposed to go in a script tag which is then linked to your .js file???
any ideas?
April 4th, 2012 at 9:13 am
I was wondering if it’s possible to have so that the “window” automatically pops up when someone enters the hompage of a website rather than having to click on another link?
April 12th, 2012 at 6:18 am
hi ,
am new to this IT environment..i have asked to create one task like,
while click on image(static image) it should popup a video player(say an example, you tube) window at the center of the screen remain background should be balnked out..and that video should be dynamic means that recently uploaded video should play..
am doing code in visual studio 2010 .
can u please help me out
April 15th, 2012 at 1:23 pm
Hi, great tut, with out question!
But im having a problem, i need the pop up to appear in the middle of the screen, and not flick the screen back up to the top of the page then, i need to add content in the new window, i wanna put a Google map in my window and for some reason its got me in a tight position because i don’t know where to place the HTML the scripts for the Google map and i don’t know how the hell im supposed to even make the thing drop a shadow on the whole page, because it just drops a blanket on the main body not the background or header! weird! Can you please help me???
April 16th, 2012 at 2:03 am
i have a contact us form in html, i want to pop it when a link is clicked
April 17th, 2012 at 11:14 am
nice tut,
i search this for a quick view for products.
i test this in the evening.
thanks for posting!
April 24th, 2012 at 11:00 pm
How to close the popup without call popup() function?
I want to open the css popup and a new window same time by adding window.open in to popup() function. So the problem is when i close popup css, new window popup is run again.
How can i do that?
Sorry for my bad english.
Thanks.
April 26th, 2012 at 12:24 pm
Great job! Thanks!
May 2nd, 2012 at 7:30 am
Hooray for you! Thanks, this is exactly what I wanted!