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!
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 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 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?