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