We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
How to create a stunning and smooth popup using jQuery
September 26th, 2008Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial, the first one of this new blog. Just enjoy it and tell me uf you can not understand something because my english sucks…
You can test the tutorial working overhere.
Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome.
What will We need?
We only need these ingredients for our stunning popup:
- HTML
- CSS
- jQuery Library
- Desire to learn
jQuery is a new javascript library focused on fast and stable development that I am using last months to “add magic” and AJAX in sites as www.plusdeporte.com, www.plusmusica.com and others, in words of their creators:
jQuery is a fast and concise JavaScript Library that simplifies HTML document transversing, event handling, animating and AJax interactions for rapid web developtment.
Step 1: What We will do?
A picture is worth a thousand words… so We will learn how to do something like this:
As You can see We will do a simple HTML website with a button that activates our stunning and smooth popup . So let’s rox guys!
Step 2: Setting up our simple webpage
So we need a simple HTML webpage with 2 html divisions: popupContact for the popup and backgroundPopup for helps our popup gets more focus and style
[sourcecode language='html'] x[/sourcecode]Title of our cool popup, yay!
Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
We can use it for popup-forms and more... just experiment!
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
Note: If you see the <head> section We included the jQuery hosted in a Google site. Some people do that to save in cache the jQuery library and save loading time in lots of webpage by having the same resource.
And here go the CSS, to add style to our html document and most important to hide our html main divisions: popupContact and backgroundPopup that conforms the “popup core” and We don’t want to see our popup at the begining, right?
[sourcecode language='CSS'] html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0pt none; font-family:inherit; font-size:100%; font-style:inherit; font-weight:inherit; margin:0pt; padding:0pt; vertical-align:baseline; } body{ background:#fff none repeat scroll 0%; line-height:1; font-size: 12px; font-family:arial,sans-serif; margin:0pt; height:100%; } table { border-collapse:separate; border-spacing:0pt; } caption, th, td { font-weight:normal; text-align:left; } blockquote:before, blockquote:after, q:before, q:after { content:""; } blockquote, q { quotes:"" ""; } a{ cursor: pointer; text-decoration:none; } br.both{ clear:both; } #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:384px; width:408px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #button{ text-align:center; margin:100px; } [/sourcecode]
The CSS code is so long because I always used to add a little CSS snippet to reset the CSS and it helps me a lot in the layout process in all websites.
So if You follow all steps you may have something like this on your screen:
Step 3: Adding magic to our popup with jQuery
Here is the core of the tutorial, the jQuery code that will allow Us to do a stunning and smooth window popup with just a few functions in our popup.js file, but first of all we must set up a variable called popupStatus to control the status of our popup:
[sourcecode lang='JAVASCRIPT']
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
[/sourcecode]
Now the function to load our popup:
[sourcecode lang='JAVASCRIPT'] //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } [/sourcecode]
Function for close/disable our popup:
[sourcecode lang='JAVASCRIPT'] //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } [/sourcecode]
We want to center our popup too…
[sourcecode lang='JAVASCRIPT'] //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } [/sourcecode]
So if we have a variable popupStatus to control the popup status and functions the functions: loadPopup, disablePopup and centerPopup for load, close and center our popup we need to interact with them by using jQuery events control in the $(document).ready function.
First of all remember that the following code will be into this:
[sourcecode='JAVASCRIPT']
$(document).ready(function(){
//following code will be here
});
[/sourcecode]
We want to activate our popup when the button with id #button is clicked, so:
[sourcecode='JAVASCRIPT'] //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); [/sourcecode]
Simple eh?, so continue for the closing event. We want to close our popup in 3 different ways: Hitting ESC key, Clicking out from the popup and Clicking on X, so let’s do that:
[sourcecode='JAVASCRIPT'] //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){ disablePopup(); } }); [/sourcecode]
Step 4: Trying our stunning and smooth window popup in jQuery!
And that’s all guys, I hope this tutorial helps you. You can try the tutorial online here to see how It is working and download here all sources (use Saving as… if it doesn’t download).
Important update for multiple popups:
If you want to create multiple popups without create one division for each popup you need to create a javascript object, then you will be able to create multiple instances of the popup object.
If you see bugs, bad english, got questions or something tell me by using comments,
See you next time guys!
One more thing…
Use 70-270 dumps to fasten your success on first attempt. Our 642-982 online training includes everything that you need to pass your 642-504 exam.
Print calendar at PsPrint.
Learn jquery and other useful web applications using HP0-D07 free resources. we offer self study 650-575 guide and 642-982 tutorial to help you become expert.
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
Great!!! very helpful guide. Thanks Yens, you are the one.
Thank you very much!
thank u r information
IT IS VERY USEFUL
u r blog Is very nice
Thanks man, I will try to post more useful tutorials
Just wanted to let you know that the demo does not work properly in Opera 9.52. The pop up opens so far at the top of the page that you can only see part of its headline.
Hi Dirk! Thanks you for your comment, I will download that version of Opera and try to fix it
ey, Now it works on old and new Opera 9.52
Sorry now it doesn’t work in IE 7.0.6001.18000 (vista IE)
Liked it when I viewed in IE 7.something XP SP2
There is a sintax fail on the js… and IE7 stops the script. I will check it in a few hours. Thanks one more time for your help
@jeremyBass Fixed, thanks one more time dude
Great tutorial.
Your english is shit mate
Ey James thanks for posting your comment… I will try to improve it in each tutorial ^^
You are welcome.
[...] Window Popup using jQuery – Learn how to create window popup from the scratch using jQuery in a simple and clean tutorial. Tested in: Firefox, Internet Explorer 6 & 7, Opera (old and 9.52) , Safari & Chrome. View example. [...]
[...] de creación de una ventana Popup con jQuery, con efectos y parafernalia incluida, paso a paso y de forma sencilla. [...]
It´s a very good website you have here,
This is a very beautiful website, I have enjoyed my visit here very much. I’m very honoured to sign in your guestbook. Thanking you for the great work that you are doing here.
@17: You are welcome
Not too bad, though this is like *one line* of code in a proper Managed Ajax framework like for instance ra-ajax, check out the Window sample at; http://ra-ajax.org/samples/Ajax-Window.aspx
.
And in fact creating it from scratch as a server-control would also be easier and less cody than this …
Though of course you’d have to use Mono or .Net on the server…
How to create a stunning and smooth popup using jQuery…
[...]Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunnin…
[...] for your web applications using the killer javascript library jQuery, as we used to create the stunning and smooth popup in [...]
Great tutorial.
However I’d just like to point out that simply because something is popular doesn’t mean it should necessarily be used. I for one despise these sorts of modal boxes — like all things new, it’s more often overused than used appropriately, and I’ve yet to see an appropriate use for it. One issue I have is that the method of closing the box is different for each implementation — sometimes its an “X” in the top-right corner, sometimes the top-left, sometimes it’s a close link down the bottom. Not to mention that being presented with a modal box when the user was expecting a new page is very poor usability, as well as making the forward and back buttons of the browser effectively useless.
[...] Here is the tutorial teaching you how to d make your own smooth popup. [...]
Thx alot, exactly what I’m looking for
How to create a stunning and smooth popup using jQuery | yensdesign – Tutorials, Web Design and Coding…
[...][...]…
[...] Be careful of who you work for They’ll never know – - – strangely evil photo Woman Killed by 13-Foot Pet Python Featured Windows Download: SoftPerfect Network Scanner Digs Through Networks from a Thumb Drive Skip Conversions [PICS] Ferrell, Fey Return as Bush, Palin for Final SNL Special Beijing Bust? Surprising things you can get for free – Work Money on Shine I encountered this dilemma after learning hypnosis. You can extend the methods of hypnosis into normal conversation, the way a trial lawyer, politician, or top salesperson would. âI don’t understand how anybody could have done this, could come in here to get coffee and look him in the eye and not do the right thing,â Algorithm Tutorials Dropping Adsense – Saying Goodbye to $100K Per Year in Easy Income The One Thing Every Software Engineer Should Know CSSHttpRequest (CHR) is a method for cross-domain AJAX using CSS for transport. 50 Beautiful Blog Designs | Design Showcase | Smashing Magazine 40 devastatingly simple ways the web can save you big money | News | TechRadar UK 10 Awk Tips, Tricks and Pitfalls – good coders code, great reuse 60 Useful Adobe AIR Applications You Should Know | Tools How to create a stunning and smooth popup using jQuery | yensdesign – Tutorials, Web Design and Codi… [...]
Got here and seen your stuff – way to go!
Hello,
I love this tutorial but one question how could I get this to do on page load, as Im wanting for it to load when the page loads instead of on the button handler, going to use cookies, so if the cookie does not exsist it does, centerPopup();
loadPopup(); and if it does it will continue loading the page, just need to know how I can get it too load with the page, thanks very much stuart.
Hi stuart! Thanks for your comment.
If you read a little about jQuery workflow, you find a main event used in the tutorial called “ready”, you know:
$(document).ready(function(){
//following code will be here
});
This event is started when the document page is ready, so if you want to load something like “loadPopup()” function you only need to write it into the event.
For cookies you can use the jQuery plugin for cookies http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ It’s easy to implement.
Good luck!
Hello, thanks for the such quick reply, iv made the changes to the popup.js script (http://pastebin.com/m7e1f41b8), what would I need for the HTML side code?
The center and loadPopup show these html divisions: #backgroundPopup #popupContact
So yo need the background division and the popupContact division created. Read the tutorial carefully
Owell thanks for the help cant get it too work with Vbulletin so owell. Cheers though.
Great site guys, please let me know if you are interested in exchanging links with us.
Great work here! I am trying to adapt this to work with multiple buttons on a page, each popping up a different popupContact. If you could advise it would be much appreciated!
Thanks!
Yo Charles, thanks for your comments!
You can do it by creating more divs with different ID’s, so you just need to create events for them and keep the menuCover active/inactive.
This popup is error with IE6, if beside popup have a select tab.
Ey Tuan! I don’t understand you! I try the example and it works fine :S
Lovely to see such a wonderful site. Thank you
[...] Smooth popup: crear un popup no modal [...]
hey…
wow…
Thanks a lot for the tutorial. Its very cool.
I would like to open the pop-up pointing of a URL instead of div from the same page. How can go about this? Thanks in Advance.
Hi Vaas, thanks for your comments.
Do you mean embed a webpage on the popup? If you do, you must put an iframe with an src attribute poiting to the site.
Good luck!
Hi Adrián
What I meant was. I have a help page (for example help.html) that I want to open in the pop-up when clicked from the main page. Any ideas?
Thanks
So use iframe. You can see an iframe working on the interface tutorial.
Sweet jquery… I am having an issue with my .swf cutting through the Pop-up on PC IE7 and Firefox3
Any ideas, have you see this b4?
THANKS AGAIN!
http://www.vermontfarmtable.com/table.html
Hi Dustin… I know some issues about .swf files on the html divisions, maybe you can try diferrent kind of z-index values on the css.
Tell us if you can fix it!
Good luck!
I’ve spent hours searching for a fix and many attempts… nothing boooo It works beautifully on Mac-Safari/FFox and not at all on Win IE7/FF3
My only option was to convert my swf to gif for the time being. they look like garbage as gif’s
If you come across a fix, please post – I worked with z-index, wmode, etc.. my research suggested that this is not possible to do (but it works on the Mac… so it is possible) I dunno.
later
Arg… :/ maybe it’s about the swf object implementation in some browsers…
Hi! What wonderful work! Keep it up!
I’m just having trouble with two things:
1. I am trying to generate a sql results with the while function in php. I want the user to be able to click each line of the sql results and get the popup window with more info taken from the database pertaining to that specific line that was clicked. I put the hidden (popupContact) inside the while function alongside the regular results that will display. In the live page only the first result clicked pops up the popup box with proper info (meaning that it works) but every other subsequent line doesnt work at all (nothing pops up at all). Any suggestions as to why this would happen?
2. In IE6 when the popup comes up the first time it allows me to click outside the popup on the background to exit. However after the popup is displayed anytime after that it doesnt work.
Thank you so much in advance.
[...] Smooth Popup: Nos permite crear un PopUp no modal. [...]
Hello, great tutorial but i have one question.
You use button ” Press me please” is any chance to use hyperlink?
so if user turn of Javascript he will load some page if is JavaScript On he will load popup….
so how to use hyperlink not button ?
@Bug Hi man! You only need to change the input button html code to Your text hyperlink
Checkout the jQuery documentation to understand the using of that kind of things!
[...] How to create a stunning and smooth popup using jQuery [...]
Great tutorial, great site!
It’s useful and clear.
Good luck with your other tutorials…
I love this site, so thank you
Great CSS Popup loved it, thanks bro! this is awesome,
keep the good work on ;]
[...] How to create a stunning and smooth popup using jQuery | yensdesign – Tutorials, Web Design and Codi… Just what it says. (tags: jquery javascript programming web2.0 webdesign design php ajax html popup) [...]
Hi,
This is a great popup. I am trying to use it for my application, it works beautifully for all the browsers but for IE . I have a Wysiwyg editor from where i am launching this popup. In IE some part of pop up is being shown on top left of the page.
Will appreciate some help..
Hi Amit thanks for posting! The tutorial works fine in IE6 and IE7 right? Wysiwyg editors doesn’t render well some layouts, so try to use the popup layout as it was on the tutorial.
Did you change the layout? Good luck!
Hello,
Thanks for this great tutorial. It works perfectly with my new site redesign. I was looking for something just like this for a couple of pieces on my site.
I was able to get it working but I have a problem. I have two links at the top that I created seperate CSS, seperate .JS, and Div for but for some reason they are both showing the same popup when I click. Any idea why?
You can see it here, the About Me and Contact link at top: http://www.metellus3d.com/index2.html
Thanks again!!!
Hi M3d! Thanks for your comment.
You have 2 errors in your js files:
- You are using the same variable name in both scripts to check out the status of your popups “popupStatus” maybe rename one to “popupStatus2″.
- You are using the same function name to load popups called “loadPopup” you need to have 2 different names… maybe “loadPopup2″. The problem here is that the first script for the browser is the popup2, so the other function never loads because popupStatus = 1, you know.
One more thing… read the “license” terms!! don’t delete source credits
Good luck!
Adrian, my apologies. I will make sure to get the source credits back! My mistake. And thank you for the help, I am going to try the fixes tonight. I will give you an update
Thanks!!!!!!!!!!!
Hey Adrian please take a look! Your fixes worked! So I added a “2″ after all popup variables and functions.
I left windowHeight & windowWidth Variables alone since those are defined by jQuery, correct?
I also added the script credits back. Sorry again for that.
I think it’s ok. Nice to see it works
Thank you for the great web site – a true resource, and one many people clearly enjoy
Adrian,
Fab popup. Really nice work. Unfortunately, in IE6 the popup doesn’t work in 2 ways and a huge part of my community is (still) in IE6.
Here’s a link where you can check out an example of the problem. This is your page with a little HTML added – http://www.scripter.net/lab/popup/example.html
Viewed in IE6 in a full size window, you find the “Categories” drop down sits in the darkened area but can still be activated.
Also in IE6, the page darkens only part of the way down (the current height of your window) and even clicking outside that area the disablePopup routine does not trigger.
Maybe you know of a workaround for these IE6 bugaboos? I notice Tuan had the same problem but didn’t see a reply to his post.
It’s fine in FF and IE7.
Thanks for any tips!
Dlinc
Hi Dlick thanks for your comment! It’s strange it works on my Internet Explorer 6, not like other browsers because it has a little vertical scroll but works fine :s
[...] другими окнами на экране. Сегодня рассмотрим способ создания такого окна с использованием библиоте…. В итоге мы получим что вроде [...]
Great tutorial – works beautifully! I just have a couple of questions (unfortunately the site I’m using it on isn’t live yet so I can’t post a link).
1. I have the text I’m using to open the popup at the bottom of every page on the site – however, on the pages where the text is long enough to have to scroll, when you click on the link it jumps to the top of the page. Is there a way to get it to centre in the current viewport?
2. Using a hyperlink for people with js turned off – how do I make it so that the hyperlink only redirects when scripting is turned off? At the moment clicking on the link activates the script and redirects, so obviously you don’t get to see the popup! I have just set up a static page for people with scripting off.
Thanks!
Tom
[...] http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ [...]
[...] http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ [...]
How To Create A Webpage…
After reading this post, I am not sure I understand what you are trying to relate. Please expand on your thoughts a little more. Thanks…
hi yen, great tutorial. you makes everthings so clear.
Thanks pinandita
One small touch is to set the cursor to be the pointer finger when over the X close text in the popup.
#popupContactClose{
cursor: pointer;
}
I would love to see somebody make one of these so the user could close the popup with the back button. My clients love the look but dislike the functionality or lack there of…
Ey Roger thanks for posting! I am not sure what are you saying but you can close the popup pressing ESC Key.
Bye!
Hi Adrian,
I’m a big fan of the tutorial and have been playing to get it more out of it.
Currently i have a couple of these open up on one page and it’s housed in coda-slider.
The problem i have is that the dark background doesn’t cover the whole page, only as far down as the edge of my window. So for really long pages if you scroll down whilst the window is open then the bottom half of the page is all lit up.
I guess it’s something to do with:
var windowHeight = document.documentElement.clientHeight;
but I don’t really know javascript so was really hoping you could help.
The problem resides in the CSS and the layout not in the javascript. Check your layout and your z-index properties
Thanks for you comment!
[...] How to create a stunning and smooth popup using jQuery [...]
I implemented this into a page and for some reason, I’m getting an error: Error: $(“#button”) is null
The is on the page, so I can’t figure out why I’m getting this error. I put in an alert to see if it picks up the button click, but it doesn’t. What should I look for?
Have you checked that the button id is on the html code? Download the example from the tut and try to play with it after usage on your page if you didn’t
Yes, the id is in the code. I’ve downloaded your files and made a working example. But for some reason, it’s not working on another page.
Hi, thanks for the tutorial and the code! I’ve found it very useful, althought there is one issue. I modified the code to adjust it to my site, it works fine except the fact, that the lightbox is not in the center of a screen when the site is scrolled down. Is there any fix for that? You can see what I mean on http://www.arturgacparski.pl just click the fourth image :]
thanks,
AG
Ey AG thanks! Are you omitting fixed property? I am not sure if the code works with scrolling bar. In this case you can check this tutorial http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/ it show you how to update the position of the centered div for the resize event, you can use it with the scrolling event
Good luck!
It finally works, the popup is being displayed at the center of a screen, all credit goes to DA_KROWA, I can’t post the code :/, any comments limitations?
Ey that’s nice AG! You can paste the code over here: http://pastebin.com/ to let us see your solution ;D
ok, here it goes, tested in IE6, Opera and Firefox,
code replacement for //centering popup section written by DA_KROWA
http://pastebin.com/f36b5f919
see ya!
ps. you can see it in action at http://www.arturgacparski.pl
hi,
i am not a programmer but i love this script and it seems easy to use but i have 2 questions
how can i have multiple links to click on to create that pop up? basically more than one link in the page?
also, i cannot have flash in the popup? doesnt seem to load flv files
thanks
Hi navin! Yes you can.
- You can call the loadpopup by adding more click events to different divisions instead / in addition of the click button event.
- I am not sure but i think that you can place the flv in the division of the popup to display flash too. Maybe you need to hide/show the flv container division on the process…
Good luck!
Great tutorial. but don´t run to me
the error is
$(“#popupContact”) is null
var popupHeight=$(“#popupContact”).height();
why?
Thanks for all
Hi there cactus! Thanks for your comment. I think you are missing a div with id=”popupContact” so you got the null reference.
Good luck!
Hello adrián, I have div=”popupContact”, but now I know the problem.
I work in Ruby on rails, this works with prototype library, If I remove this library the popup.js run althought at the end disablePopup()funcion run withought I press x. I dont know because this.
Before remove Prototype.js file I improve put in popup.js file this.
jQuery.noConflict();
jQuery(document).ready(function($){
in this case the error is
$(”#popupContact”) is null
var popupHeight=$(”#popupContact”).height();
althought I have this div!!!!!
I need this popup or similar for my project, do you know the solucion.
thank for all, again
I’m sorry, but i don’t understand how use 2-5 popups in 1 page..
Hi Orange! Charles asked the same a few days ago, here you have the answer:
“You can do it by creating more divs with different ID’s, so you just need to create events for them and keep the menuCover active/inactive.”
Good luck!
I tryed to use this example with silverlight control into popup and the silverlight control is visible only in IE. Do you have any ideas why it is not visible in Firefox?
Sorry Melania I don’t know nothing about silverlight… maybe it’s the plugin? :S
hi Adrián ;
thanks for the script .
I’m new this and jave 2 q’s:
1. how can I replace thee bottom with a link ?
2. how can I place place some type of image sppiner so the user will know that the content is being uploaded into the pop up.
thanks so much
jeff
Hi, this script is great but I cannot work out how to do it for multiple popup windows (I know you have hinted how to do it but I am rubbish at javascripting!). Do you or anyone else have an example/tutorial using multiple popups? Or could you possibly explain how to do it in a bit more detail please. Thanking you in advance!
@jeff & @chris: Sorry mates I cann’t explain it at all, you must learn a little more about javascript basics to do things like that…
By the way:
@Jeff, for replacing button with a link, just do it into the html and remember to use the same id to the new href.
@chris, you must duplicate the html popup divisions using other IDs and duplicate it into the js (using the same new IDs created).
Good luck guys and sorry but i cann’t do more for you :S
[...] View This Article Email This To A Friend Leave a Comment [...]
I found a solution to the problem people are having with it not centering always in IE and Firefox, http://www.webdeveloper.com/forum/archive/index.php/t-56507.html the solution offered on there worked for me. It just requires how you get the windowWidth and windowHeight variables to change with 3 different options.
Great tutorial, thanks for your efforts
Ey Chris Thanks you so much!!
hello from sénégal,
thanks for the tutorial i like this site, cool article .
hello…i have a problem when used it in IE7…the popup is not in the center of the page in IE…can tell me how to fix it??
ohh nevermind…i already fix it thxx
jur, si que ha tenido aceptación el tutorial jaja
en internet explorer 6, parece que no funciona si la pantalla tiene scroll
el ie6 te muestra como fondo lo que ocupa la primera pantalla (es por el absolute en vez de fixed p*** ie) :X
así que tienes que sustituir el valor:
$(“#backgroundPopup”).css({
“height”: windowHeight
});
por :
$(“#backgroundPopup”).css({
“height”: window.top.document.body.scrollHeight
});
@Demiurgo Thanks
how to create the lightview popups pls send me the code
@sreenivas you can download the code at the end or the begining of this entrie
I am trying to create multiple popups for a site I am designing: http://www.students.emory.edu/APO/service.html
Is there an easy way to create multiples for different names? Each of those bullet points listed will end up being their own popup. You can click the “Shakespeare Tavern” one and it works perfectly so far.
It would be great if I didn’t have to copy the whole code and rename each a separate item.
Thanks for your help. I was looking for a popup that looks good and yours is great.
@easehiketrim You can create a “popup” class in javascript and then create multiple instances of the object if you need it.
You are a genius! Thank you for this.
I wanted to add, is there a way in allowing the popup box to work on top of a Flash Object. This is doable since last.fm have done. If you click the share button. You can drag it over the Flash Object on the top right. Example – Click the Share button.
I was hoping how I can do this? Just some direction is needed.
Thank you once again.
Hi Abs and thanks for posting! I was thinking about the possibility of use position:relative and a negative z-index but it didn’t work…
I have entered in lastfm and click the share button and get this: http://img525.imageshack.us/my.php?image=lastfmbg2.jpg I am using firefox 3.0, what navigator are you using to load the page?
By the way, If you found the solution to the problem or want to ask more specific questions I recommend you enter in our new forums http://forums.yensdesign.com and ask there. Good luck and tell us if you fix it!
Hi, I’m trying to implement the popup in a site and I have everything set up right, but I’m getting this error in the Java Console:
Error: $(“#button”) is null
Source File: file://localhost/Users/alemieux/Documents/SyberWorks/newsite/js/popup.js
Line: 62
You can see from my code here, that I do have a button ID:
Login | home | contact
So what could be the problem?
@Al Lemieux I cann’t see the button id in this code… are you sure? You forget the id
Adrian,
Yes, it’s there <div id=”button”><a href=”#”>Login</a></div>
In the other code I couldn’t see the button id, but in this new code yes… Have you included the jquery library before all? It seems jQuery isn’t working
Adrian,
Yes, here’s the code: <script src=”http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js” type=”text/javascript”></script>
Is this correct?
Yes, If you have checked that you are loading first of all the jQuery and there is no errors in js before that error, I don’t know what is happening… if you want, post the code in our forums in a post so other people can check it too and upload a demo to internet to debug with firebug
Thx
Hi, Many thanks for the lightweight popup, works great except for one thing: multiple popups on a page. I know you explained a workaround in earlier posts but it would be great if I could have multiple popups on a page without having to edit/add to the javascript everytime.
Wish it could something like:
Popup 1
content
Popup 2
content
and so on..
Thanks anyway.
Wonderful article Yens. Thanks a lot.
@Venky Thank you so much!
@Ebrahim: I think I have explained it in another comment. If you want to create multiple instances of the popup, you need to implement the popup as a javascript object, then you will be able to create multiple instances of the object.
hi..
I am trying to get this working inside my ASP .Net application but it is not working properly when ever i keep this in form/ What should i do?
@Niks can you try your code with firebug enabled to see if there are some javascript errors?
I like the tutorials on this site. I’m developing a site in which I give you credit.
@haryoh Thank you so much! It’s great to see people that finds useful our tutorials
Thanks for the script. Very nice.
I’m having issues using it for multiple popups. Is there an example on what needs to be done for multiple popups?
Thanks.
@Sudman you have two options:
- “Copy paste solution”: Creating multiple divisions and manage them.
- “Objects”: Use and extend javascript objects to manage different instances of the popup object (that you must create first).
Any way to add a scroll bar to the jQuery popup window if the content requires it?
@justin You only need to set up overflow: auto in your CSS code to the required division
How to create a google adsense widget with jquery that when dragged & dropped would add the google adsense code to the html? Could someone lead me to any resources that’ll help me create this one. I’m a newbie in jquery.
So I read the comments about multiple popups, can you please explain how to do that with some example?
My idea is: with php (within a foreach) I can create different links like:
Then I can create different divs: ,
Then the JS has to be modified so that popup1 “links” to popupContact1 and so on. I’d have just to “append” a variable (a number) to the JS code responsible, like:
$(“#popupContact/****number****//”).fadeIn(“slow”);
That’s it right? Is that possible? How?
ok, my previous comment did not work. Pasted the whole comment here for those interested.
http://pastebin.com/m7d9edec9
@koichi Yeah, that’s the easy way, but as I said to some of you, you can do it by working with javascript objects having a unique popup division instead of duplicate the same division with different ids and content.
If we got time, we will try to create a plugin for jQuery or similar to show you how to implement that
Well I don’t know how to work with js objects… isn’t there an incremental function to associate button 1 with div 1 and so on? something simple, I think..
@koichi Take a look at: http://phrogz.net/JS/Classes/ExtendingJavaScriptObjectsAndClasses.html
Yes “Brilliant” I have used this in my web site thanks, but does not work in IE5.
I know that is kind of old now but just wondering if there is any way to achieve this ?
I think this is way beyond what I need…what in your link should i read?
This stuff is great, thanks!!
[...] January 20, 2009 · No Comments So I’m always learning new things about the web and I learned something neat that I wanted to share. I met a friend and old employer (Michael) for his layover in Atlanta last week and we discussed web things… He’s very knowledgeable in the field and sent me a tutorial on jQuery: How to create a stunning and smooth popup using jQuery. [...]
I am trying to make multiple popups on the same page… Sorta like Lightbox, where u can access a series of pictures in a row… How can I accomplish this? I have tried but I cant seem to figure it out.. Can you help me here?
Is there any way to make the box stay always in the center of the site. When its open and you expand your browser the pop up will stay its original place and look quite odd.
Why didnt work asp.net web pages. I tried but didnt work there.
One small flaw in IE6:
I your page is very tall, clicking the button will center the popup above your scrollbar, out of view.
Fix:
var scrollTop = (jQuery.browser.msie && jQuery.browser.version == ’6.0′) ? $(document).scrollTop() : 0;
‘top’: (windowHeight/2-popupHeight/2) + scrollTop,
Adrian, please we are all looking for a way to realize multiple popups!
@koichi Thanks for posting! Please red the comments, you need to learn about javascript objects and multiple instances!
Thanks, this is what i was looking for!!!
I am trying to add this popup into an existing website and I have problem with it. When I click the popup, not only the popup window is highlighted but certain part of existing website is highlighted as well. Why does that happen? I am trying to investigate it by myself and I solved partial of it by increasing z-index of your popup and background, but there is still a part of existing website which will be highlighted when I click popup button.
@Ben Hi and thanks for posting! Try to supress the background popup in html and javascript code or put the opacity to 0 if you don’t want this highlight.
Good luck!
Thank you for your reply. My situation is I cannot (probably should not) change anything of exiting website (for example, change CSS, HTML and etc). What I can do is I can use javascript to change existing website when it is rendered in the browser, so what shall I do? Thanks!
I cann’t understand you. How did you added the popup if you can’t change the html/css code?
By the way, just supress the code referenced to the background and that’s all!
I inject extra javascript on the fly during the page rendering without changing existing html. And by suppressing the code referenced to the background, do you mean suppress the code of existing webpage or your popup code? Sorry that I am a newbie to javascript thing. Thanks!
Problem solved! It is still the problem of z-index. I need to set the z-index for popup higher than anything else in the webpage. Thanks for your help!
Great to hear that Ben
Very good tutorial! Congratulations and thanks.
Very useful article. One question though, where can I download popup.js file ?
Thanks
@JQuery you can download all the files at the end of the tutorial
I liked the tutorial but I am focused on something else rather than the pop up i.e the background. I felt it something like youtube light and megavideo cinema on mode. I want to get the same result with this tut and I have got a question for you. Is the background darker as a whole or just outside pop up? With pop up window it seems like its just outside,but is it possible to exclude the area underneath the pop up?
Thanks for the tutorials, they are all very helpful. And forget the bad English, no need to apologize for it. Most of us can only read, write & speak in one language.
Love this tutorail. Good work mate. One thing I want to do is be able to do, is keep the background of the pop-up the same size as you have it, but have bigger scroll pages, so obviously scrolling, would be needed. how would I go about this?
Thank you very much for the total one. I am very much new with jQuery. I have php page and it displays several thumbnails. All the thumbnails has a detail link. I just put detail between the div button. The pop up is coming nice but always with the last thumbnail. I found it is a excellent work but not dynamic enough(I doubt only for me!). I need to pass a unique id. But where should I pass?
Hello,
Great site. One question though. If I want to use a link instead of a button how would I do that?
@Titus Thanks for posting! Just put your desired link and remember to give it the same id so you don’t need to change any in the javascript code.
Good luck!
It did’nt work at all.
@jarret So you got other errors. It’s just as we said! Try to post code / example in our forums and will try to help you
Can you tell me if this can be set to automatically popup on the second part?
I.E – it does not display the first html page which requiers you to hit the button ‘press me please’
I would like the pop up to automatically display when a member on my site goes to a chosen URL page.
Thanks by the way, so far looks pretty funky, if only I can get it to do what I need?
Cheers
Hi, I am very appreciative of your tutorial, clearly it is very detailed. However, I got a serious doubt. Can I use this code on blogs like Blogger? Thanks to anyone who answered my queries!!!
@Nephoros This code can be used in any kind of websites bu I don’t know how you can implement code in blogger.
Good luck!
Is there anyway to use this script to work on PageLoad instead of clicking the button… I want it to take over the page upon page load and then function the same after that.
-meylo
Hey,
I integrated this within my site in about 10 minutes and it works great! One small change I made: I didn’t like how when hovering over the X close link the cursor didn’t change like it should for a normal link. So I changed it to this:
x
Cheers
Looks like my html code was interpreted. Basically I added “href=’#'” to the close anchor.
Ok I found a solution for multiple popups (without JS objects):
1. Make copies of #popupContact and change the id to something unique, e.g #popupAddUpdate
2. Within #popupAddUpdate, change the ID nodes to CLASS nodes. This is required because there are multiples now. E.g. id=popupContactClose changes to class=popupContactClose
3. In the css and javascript, update the code to .popupContactClose instead of #popupContactClose (same goes for any other ID nodes within the popup that are “shared”)
4. Clear out the contents of the original #popupContact, so it’s just an empty div.
5. Now on to the good stuff: Basically when you want to show a specific popup, everything is the same as before, except first thing you need to do is clone your custom popup DIV and insert it into to original div. like so:
$jquery(“#popupContact”).html($jquery(“#popupAddUpdate”).clone(true));
(then call centerPopup and loadPopup like before)
Does that work for ya?
@Justin ey can you share that code in our forums for our users?
I’ve been looking for a subject for my first every blog post. Perhaps I can do it with my solution? I can reference this post, and show people how to make it work for multiples. Do you mind?
@Justin yeah you can do it by keeping the credits in the code and in the post, as always
Just curious, sorry if it’s a silly question but I really dont know, how would I replace the standard button to my own graphic design?
not really a popup, it’s more a modal window. a popup would let you do other actions in the parent window while still viewing the contents of the popup.
[...] How to create a stunning and smooth popup using jQuery | yensdesign – Tutorials, Web Design and Codi… Posted: Friday, February 27th, 2009 @ 2:10 pm Tags:admin, ajax, delicious, design, development, hacks, hotel, javascript, jquery, mac, osx, reference, safari, sanantonio, tutorial, vacation [...]
Is it some how possible to trigger the popup window automatically when the page is loaded?
Something like onload=’popup_window.show();’
sorry the last comment is worthless
Hi, this tutorial looks good. I was just wondering if there there was a way for the popup to display the contents of another url, instead of just the static contents you’ve written in your html file.
So basically when I click the button, I want to see the new page show up as the embedded popup on the old page.
Thanks for any help you can give me.
Great tutorial! I am new to jQuery and would like to know if it is possible to display the window when the user closes the page. Thanks for your help!
@Kyle Take a look at this: http://blogs.x2line.com/al/articles/756.aspx
Hi i saw your nice popup however,.. the only problem i see is .. when you have your browser at height 500 for example then flash the popup out .. then try to expand the height you’ll notice that the dark background won’t adjust as well…any fix for this?
So Coooooooooooool, yet so Simple!!
Thanks Dude!!!
Hi, how can I make it load the popup when user goes to the website, instead of clicking a button? I want to make it as an announcement kinda stuff.
kindly advise, I have no clue about jQuery here.
thanks
@andychin Just need to change the on click event for the on load event of the document
AWESOME Tutorial. Thanks a lot
It does not work for me. I have created popup.js, html page, general.css and logo.jpg but button press does not shows popup, did i missing something.
join gdi i will train you personally over the phone go to makeincomeonline.ws to join
Hi – Thanks for this approach. Works well.
However only on IE6, I get an issue:
Go to this page, if you dont see the pop-up click the help button.
http://www.emailagift.com/
The control below the pop-up show up only for this page.
Thank you your help.
How do you implement this code to open an external html, php etc files?
using something like this:
$(‘A[rel="external"]‘).click( function() {
window.open( $(this).attr(‘href’) );
return false;
});
Re: Dustin’s query about swf files above. Answer is here:
http://codingforums.com/showthread.php?t=95109
Hi thanks for this useful tutorial. I’ve tried it but how if i want to combine this method into my existing webpage? ive tried it and the css overwrite with the existing css.
How can i overcome this problem??
As in this tutorial the css got body{code…} too same with my existing web page..
This is superb, thank you very much.
Great post. I’ll definitely be utilizing this. I’m just starting to get into jquery and have been very impressed.
One question I had on this. Lets say your page is very long (say 3 full page scrolls) and you want this to open on the third page scroll – I plugged this in and did some tests and instead of opening at that page position it opens it at the very top of the page. Not very efficient. Is there anyway to fix this glitch and have it open up and center at your current scroll position?
Excellent tutorial, however.. what if we have 3 options
Scenario:
link 1, link 2, link 3
Each link clicked will display different content.
very usefull!
Hello. On one web page how do I create two different buttons that will activate two different pop up windows. Current problem is different buttons activate the same pop up. Thought I had them separated in both the .js file and the the .css file, but I guess not. thanks.
Hi. I love this code! I’m having some trouble getting the popup to center in IE8. It works just fine in firefox, though. Any ideas?
Link: http://meteoricmusic.com/cmo/
To try to troubleshoot the problem, I have clicking the colored circle in the lower left run loadPopup() and then clicking the link in the popup runs centerPopup(). Thanks!
Was able to fix it. guess ”
” really matters instead of
(DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”)
(html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”) instead of (html) did the trick
[...] 1. How to create a stunning and smooth popup using jQuery [...]
Thanks, great article
You can check popup status without additional variable (popupStatus). Just add something like:
if( $(‘popupDiv:hidden’.length > 0) ) {
}
Thanks.
It helped me a lot.
tc
oh, greate article!
Thanks!
I have been looking for this for a very long time and this was the one I find it excellent
Very nice. Thank you a lot for this tutorial.
Also very nice CSS layout for the popup.
Cleanest tutorial I’ve ever seen. Keep up the good work man!
Adrián,
With all the questions about multiple popups for different links you should just modify the plugin and allow them to state the ids in your $(document).ready(function () {…}; Like almost all jquery plugins.
For example:
$(‘#theID’).myPopUp(options and customization);
This way your plugin will be dynamic and extremely useful. All jquery plugins should be dynamic.
Hope to see a release some time.
@Dale Yeah, but it’s not a plugin, just show how to create a popup in jQuery, there are multiple plugins for this, and plugin tutorials about it. Anybody can make his own popup and then convert it to a plugin.
@Adrián,
You are right. However, your version of doing this I feel is better than the ones on the jQuery site. That is why I would like to see this as a plugin. Great job!
Hi Adrian,
Is there a way to make the popup display on the screen, and then follow wherever the user scrolls to? For example, I have a web page that is quite long, so the user scrolls down, and then clicks a button that displays the popup. However I can only make the popup display at one point of the screen, so when they scroll, the popup doesn’t move and thus they cannot see it.
Thanks
@Jon Hi! Thanks for posting. Try to use the CSS property position: static instead of absolute
this is a really great article and it helps me a lot,
Thanks for this and keep it up
FYI, to get this to work i IE6, I had to change the code a little:
FROM:
$(“#backgroundPopup”).css({
“height”: windowHeight
});
TO:
$(“#backgroundPopup”).css({
“width”: windowWidth,
“height”: windowHeight
});
Hi,
can you update your plugin to use multiple popup ? could you give us an exemple ?
Thanks a lot
I implemented the popup and all works fine in Firefox. In IE7 and IE8 the popup is displayed and text is displayed just fine but my .png images do not show up. Any ideas? Thanks!
Great Work, I will most definately give it a try… seems to work in IE8 just fine unlike another popular script.
Keep it up!
That is excellent – thank you!
Hi,
is it possible to open the popup with a normal textlink? I dont want Buttons
@Max yeah of course! Just change the button for an with the same ID and it’s ok.
This is great. I am using an anchor tag to open the popup, but i need to pass the href value (e.g., href=”someURL.php”) along to the popup, where the user is prompted to choose their region (US or UK). Depending on the user’s region select will pass them along to a page that dynamically shows their regional content (e.g., “someURL.php?region=uk”. Any idea how i can disable the anchor click-thru on the first page but pass its value along to the popup where i can add add on the querystring and finish the click-thru there? I am essentially trying to have the user build the URL.
I add the popupjquery folder inside my web site and I am trying to let the window open when the homepage is opening but I have problem the let it open by itself. May you please tell me the onload code to add to my page?
[...] same page links (used all over my site, but most effectively on the contact link in my footer), and Yens Design for a quick how-to on creating the modal pop-up background darkening effect (surprisingly extremely [...]
Hey, I used the code here and it works great in IE6/FF/Safari … but I can’t get this to work in IE7.
Any suggestions?
Thanks in advance =)
does not work in IE8. _position:absolute is ignored. tried top put !important but still same.
Hi,
This works great by all means, however if the page is re-sized in IE6, the background no longer scrolls to the whole page? With an expression i can get it to work but it only re-sizes to the height/width of the current window size – not including the scroll, any help?
Cheers
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 3:54 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
I think this tutorial is really good. I’ve noticed that his example worked perfectly on ie7 and ie6… view his actual site in ie7. It works.
There was some piece of css code that I was missing and I couldnt get my copy of his example to work on ie7 or ie6.
I found the following code that i overlooked which was helpful:
body
{
height:100%;
margin:0pt;
}
This resolved the width issues I was having in ie6 and ie7. The height of the popup was still not the full size of the document (not window) I suspect this wasn’t working in ie6 and 7 based on the following link:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Since the height was not working, my final solution was to move my background div and popup around as the user scrolled my page if i was in ie6 or ie7 browsers by using the following code:
//centering popup
function centerPopup(){
if (navigator.appName == “Microsoft Internet Explorer”)
{
$(“#insertPopup”).css({
“position”: “absolute”,
“top”:document.body.scrollTop + 50,
“left”:”35%”
});
$(“#backgroundPopup”).css({
“position”:”absolute”,
“top”:document.body.scrollTop
});
}
else
{
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(“#insertPopup”).height();
var popupWidth = $(“#insertPopup”).width();
//centering
$(“#insertPopup”).css({
//”position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});
}
}
function wheel(event)
{
$(“#insertPopup”).css({
“position”: “absolute”,
“top”:document.body.scrollTop + 50,
“left”:”35%”
});
$(“#backgroundPopup”).css({
“position”:”absolute”,
“top”:document.body.scrollTop
});
}
if (navigator.appName == “Microsoft Internet Explorer”)
{
if (window.addEventListener)
window.addEventListener(‘DOMMouseScroll’, wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
window.onscroll = wheel;
}
Its not a nice solution, and If anyone knows what CSS settings this tutorial is using to make the height of the background div the full size of the document (not the screen or window) Please update here. Hope this helps someone.
See Ya
It’s a wonderful example.
Thanks.
There is a small problem i am getting.
When using tab key. i was still able to navigate to the objects on back of popup which is undesirable.
This is also happening with the example here.
Please let me know of any possible solution.
Thanks once again.
@Amol Maybe you can try to use the .focus() function to get the focus at an element of the popup
@Adrian I have used .focus to get focus on an element on popup. but issue is using tab key i can still go back to elements in the blackened page, so i can still access and use them which is should not happen.
@Amol I see… I don’t have what can you do, maybe put all inputs as disabled and then go activate them?
Just to let you know there is a spelling mistake in first paragraph “tell me uf you can not understand something because my english sucks…”
suggestion:tell me if you can not understand something because my english sucks…
Nice tutorial…
Hi,
Nice work yens.
I wanna use this popup with this script ” http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html “.
I tried your script on a simple page & it was working fine. But when I tried to use it with the above mentioned jQuery plugin, it does nothing. Can you please give me some guideline that how can I make your popup working with that script?
Waiting for response…
Hi, It’s very great!. Your code help me so much.
Thanks a lot!
What a great tutorial!. It was so simple and gave me exactly what I needed. I also appreciate how clean and usable your code and code boxes are. Thanks again,
Is splendid your script. But….not is perfect
I want scrollbar and resizeable popup window. It is possibility?
@lulian Ey! It’s not perfect of course, just a “how to” to do your own popups!
You can make it “scrolleable” by using the overflow CSS property. The resizeable part.. it’s harder to explain in a simple comment, google it
Hello, thanks for the script.
Could you please tell me how to do
“If you want to create multiple popups without create one division for each popup you need to create a javascript object, then you will be able to create multiple instances of the popup object.”
Checkout this: http://mckoss.com/jscript/object.htm
Thanks very simple, its just what i was looking for thank you!
Hi Adrian,
many thanks for your tutorial! It’s nice to see other Spanish people doing these cool things.
Just wanted to report that in the “//CLOSING POPUP” code box in line 12 there seems to be a formatting error:
if(e.keyCode==27 &amp;&amp; popupStatus==1){
should be
if(e.keyCode==27 && popupStatus==1){
I hope this helps!
Manuel
Please how can i run an URL inside the popup window
Hi Adrian, thx for the turotial!
I’m learning java and jquery, and don’t understanding when you tell the position.
Could you explain this part of the codice?
“”
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
“”
I understand:
- windowHeight/windowWidth = is the size of the browser
Thanks!!
Good Stuff. I have a similar question to some of the ones that were asked before. I am running a table that is being pulled from a database. I want to be able to click on the business title and have it pop up wit the rest of their information. I got the pop up working by throwing in a ‘a[id=^button’ in place of button so that everything that starts with button id would open up the pop up. My only problem is that all the business’s are popping up with the information of the first business. I don’t know how to select the row that I’m clicking on. All the code is at this link:http://stackoverflow.com/questions/1059504/jquery-pop-up-box-pull-from-a-database-ror but I haven’t got any help with it.
do I need to upload on my server any additional jquery/js files to make this work?? thanks…
I figured out my answer to my post and might make my own tutorial of how to do this with multiple pop ups pulling from a database in Ruby. But one question I had that I didn’t know how to fix is say if you have to scroll down quite a bit to get to this pop up and you click on it, it shoots the the top of the page and opens the pop up. So when you close the pop up you have to scroll back down to where you were which can be inconvenient.
Hi… I wonder how to change this code to put into my web more than one button and load diferent popUp using the same JS code. Plese reply…
Txh
That’s really a great work
I will try to use it to show big images on my photo gallery
Thanks
Hi Adrian,
You have posted several answers to the questions similiar to:
“How do I open the popup from a click on a textlink in an existing webpage instead of from the button in your “simple webpage”?”
The answers appear to range from USING IFRAME to ADDING A CLICK EVENT TO THE DIV INSTEAD OF THE CLICK BUTTON EVENT to PUT YOUR DESIRED LINK AND GIVE IT THE SAME ID.
For us beginners, could you please give us an actual code example and specify which of your example file(s) to be modified? Are you referring to line 14 of the “simple webpage” that starts: <input type=”submit” ?
This could save you from being asked the same question over and over about how to accomplish this, and greatly assist beginners like myself.
Hi there,
I have created a popup using jquery and i have made it to openup in the center of the page taking into consideration the scroll postion. But now the point is iam running my site in an iframe in which i have disabled the scroll bar, the popup still opens up but in the center of the iframe, i want it to take the scroll postion of the main window into consideration and open in the center of the screen rather than the iframe. What can be done????? Any helps???
I got nice tutorial with jquey popup thanks for you post but can we do such pop up message from external files and when user submit the form external files will be open.
Ok, here is a quick one on multiple pop-ups. Not sure it’s best practice, but it works for me.
Javascript:
/***************************/
//@Author: Adrian “yEnS” Mato Gondelle
//@website: http://www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(popUpElement){
//loads popup only if it is disabled
if(popupStatus==0){
jQuery(“#backgroundPopup”).css({
“opacity”: “0.7″
});
jQuery(“#backgroundPopup”).fadeIn(“slow”);
jQuery(popUpElement).fadeIn(“slow”);
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(popUpElement){
//disables popup only if it is enabled
if(popupStatus==1){
jQuery(“#backgroundPopup”).fadeOut(“slow”);
jQuery(popUpElement).fadeOut(“slow”);
popupStatus = 0;
}
}
//centering popup
function centerPopup(popUpElement){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = jQuery(popUpElement).height();
var popupWidth = jQuery(popUpElement).width();
//var popupHeight = jQuery(“#popupContact”).height();
//var popupWidth = jQuery(“#popupContact”).width();
//centering
jQuery(popUpElement).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});
//only need force for IE6
jQuery(“#backgroundPopup”).css({
“height”: windowHeight
});
}
function myPopUp(triggerButton, targetElement, closingElement){
jQuery(triggerButton).click(function(){
//centering with css
centerPopup(targetElement);
//load popup
loadPopup(targetElement);
});
//CLOSING POPUP
//Click the x event!
jQuery(closingElement).click(function(){
disablePopup(targetElement);
});
//Click out event!
jQuery(“#backgroundPopup”).click(function(){
disablePopup(targetElement);
});
//Press Escape event!
jQuery(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup(targetElement);
}
});
}
//CONTROLLING EVENTS IN jQuery
jQuery(document).ready(function(){
//These functions initiate each popUp. myPopUp takes has three options: the button, the popUP-element and the popUp-closebutton
myPopUp(“#button”, “#popupContact”, “#popupContactClose”);
myPopUp(“#button2″, “#popupContact2″, “#popupContactClose2″);
//LOADING POPUP
/*Click the button event!
jQuery(“#button”).click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
jQuery(“#popupContactClose”).click(function(){
disablePopup();
});
//Click out event!
jQuery(“#backgroundPopup”).click(function(){
disablePopup();
});
//Press Escape event!
jQuery(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});*/
});
Remember to update your css, so buttons, popUp-elements and close-buttons use classes. Like this:
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
div.aPopUp{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2000;
padding:12px;
font-size:13px;
}
div.aPopUp h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
.closeButton{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
text-decoration:none;
}
Happy coding!
Joel
Hi Joel, awesome script, easy to implement and really clear documentation, thanks you so much for the effort!
Like many others, I am using your script to edit each row of a table, meaning each row has a button, when clicked, a popup window appears with values preloaded and editable.
However, the rows of my table are generated with an array (retrieving data from mysql), so the row numbers are not known until page is loaded.
Your sample for the multiple value is good for small number of row numbers, but not if the number of rows is huge or unknown. Using you way, I can only get the first row to open, all other rows have no activities.
Is there any way to reuse the content div section, so i can populate it accordingly to the data retrieved from the db? And not having to declare each one individually??
I’d really appreciate it if you could provide any help, I’ve been drowning in this issue for days…>_<
Sorry, the credit goes to Adrian & Yens Design. Thanks Joel for the multi-popup solution although it doesn’t work for me. Help anyone?
Hey Adrian!
This seems like a pointless post but I wanted to tell you that you do a great job with keeping up support for this. You’ve had this up for a year and I noticed you still reply to posts! That is great service. Most people with their bits and snippets out there don’t even reply to the first post! Anyway, great job. You are a quality programmer.
Regards,
Dale Larsen
Hi Cincin
Yes, credit definitely goes to Adrian & Yens Design (forgot to say thanks, so many thanks!).
Regarding reuse of the content div section. I see your point and I think you should use ajax to solve your problem. There is a function called loadPopup() and I think this would be the place to put in an ajax call via jQuery. So have a search for jQuery+Ajax and you should be on your way…
Joel
Your tutorial is great, but code is not working properly in my wordpress web site. Try to see my Contect page… Any suggestion?
Sergio
Your tutorial is great, but code is not working properly in my wordpress web site http://www.enfoques.co.uk/. Try to see my Contact page… Any suggestion?
Sergio
Many thanks for you tutorial, it is great. I have tried to use it in my wordpress web site http://www.enfoques.co.uk/, but it is not working well, You can see that in this link: http://www.enfoques.co.uk/perfil/
Have you got any suggestion?
Sergio
The popup is in the footer on the word: patoCreative, but it does not work well in every page.
Sergio
The multiply windows is awesome. Really nice and easy to implement.
I decided to use an image instead of button. By simply adding
Not the best way, but it’s work for me.
Thank you,
Constantine
I tried to implement this system to our java software, but it refuses to set the size properly or center the popup(s) in IE7. It works perfectly in FF and Crome.
I did some quick mockups in paint.
FF & Crome:
http://jedi.atw.hu/file/mockup01.bmp
IE7:
http://jedi.atw.hu/file/mockup02.bmp
Never mind, I fixed it.
Our IE7 interpreted the css height of 75% as 640px. I have no idea how. So I had to hard-code the percentage into javaScript and calculate the new size there.
Also, I can’t set the size of the background to absolute, so I set it to the size of the document, if that’s bigger than the window.
And finally (and this seems unique to our system), I can only determine the window and document size with $(window).height() in IE. Anything else returns undefined or 0.
[...] something just popuped up in front of him. Again, easy enough to do with jQuery and there is a wonderfull tutorial on how to do just [...]
Hi. Thank you for your great tutorial.
First I tested your code on all my browser and it working fine.
I tried to use your code changing the div #button by something like
Test 1
Test 2
Test 3
And it is not working on IE. and others.. Still working on FF
Any ideas?
I am sorry if I am doing something wrong. I would like to learn and correct it.
Could you help me please?
Thanks in advance
Sorry. I see the code is not posted.
Test1 2 and 3 are options of a select. And Test 3 is the id=”button”
Thank you.
This is a great tutorial. 1 question. I am trying to use multiple instances of this on the same page so I just duplicated all the divs and it works fine except that the animation for the 1st popup appears in all of them rather than a different animation for each instance. How do I correct this?
my.hbci.com/weathertest
The tutorial is great!, i did something like this in the past with plain javascript, and one of the
most tricky parts was to center the popup in a really cross browser fashion.
Following the jquery philosophy, it would be great if it could hide from us all the code needed to center the popup, providing some kind of center method.
hey dude, your english is crap but your code is very good; it works and is really helpful. Thanks alot, I guess if I spoke your language I would be crap at it too.
In IE6 if we have a long page, a small change is required in script:
$(“#backgroundPopup”).css({
“height”: document.documentElement.height
});
Dude,
You ROCK !!!!
I was searching for this kind of popup since 1 week and finally I found it here.. Thanks a lot buddy.
I tried to use the code for multiple pop-ups provided by Joel, but its not working for me!
I used different instances, but even then it did not work. Any suggestions/ code tht works?!
Hello,
thanks for thre great work.
How can I open the popup in php only whean a spezial variable is set?
Excampel:
if ($_REQUEST['pop'] == 1)
{
//open the popup?
}
Hi Scri
Could you show some code or link to website? Perhaps we can help you better with your multiple pop-ups…
Joel Grøndrup
Thanks for the tut!
I ran into a common issue: the problem with auto-centering in IE (what a lovely browser it is…sarcasm). Anyway to remedy the issue with css, I did this:
$(“#popWin”).css({
“position”: “absolute”,
“top”: “50%”,
“left”:”50%”,
“margin-left”: popupWidth / -2,
“margin-top”: popupHeight / -2
});
Using the 50% and negative margins works in Chrome, IE8, FF4, Safari 3/4, Opera cannot handle the css and the popup is closer to the top of the window.
Working on the auto expanding bg div now. Hope that may help someone.
Fixed the auto expanding (width) issue…
In the tutorial is reads:
TUTORIAL
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(“#popupContact”).height();
var popupWidth = $(“#popupContact”).width();
$(“#popupContact”).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});
$(“#backgroundPopup”).css({
“height”: windowHeight
});
}
MINE
function centerWin() {
var winWidth = $(document).width(); // CHANGED THIS
var winHeight = $(document).height(); // AND THIS
var popupWidth = $(“#popWin”).width();
var popupHeight = $(“#popWin”).height();
$(“#popWin”).css({
“position”: “absolute”,
“top”: “50%”,
“left”:”50%”,
“margin-left”: popupWidth / -2,
“margin-top”: popupHeight / -2
});
$(“#popBg”).css({
“width”: “100%”, // AND THIS
“height”: winHeight
});
}
Fixed the auto expanding (width) issue…still working on the expanding height.
In the tutorial is reads:
TUTORIAL
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(“#popupContact”).height();
var popupWidth = $(“#popupContact”).width();
$(“#popupContact”).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2-popupWidth/2
});
$(“#backgroundPopup”).css({
“height”: windowHeight
});
}
MINE
function centerWin() {
var winWidth = $(document).width(); // CHANGED THIS
var winHeight = $(document).height(); // AND THIS
var popupWidth = $(“#popWin”).width();
var popupHeight = $(“#popWin”).height();
$(“#popWin”).css({
“position”: “absolute”,
“top”: “50%”,
“left”:”50%”,
“margin-left”: popupWidth / -2,
“margin-top”: popupHeight / -2
});
$(“#popBg”).css({
“width”: “100%”, // AND THIS
“height”: winHeight
});
}
Good example, but how to create a simple popup,without heavy CSS and style.?
I’ve taken your popup code and reworked it to allow multiple popup instances on a single page. You can see it working on my site: http://www.atasteofnewtown.com/
You intitialize the popups like this:
$(document).ready(function() {
// Initialize the login popup
var loginPopup = new popup();
loginPopup.init(login, ‘#loginLink’, ‘#loginPopupClose’, ‘#loginBackgroundPopup’, ‘#loginPopup’);
});
$(document).ready(function() {
// Initialize the photoUpload popup
var photoUploadPopup = new popup();
photoUploadPopup.init(photoUpload, ‘.actionAddPhotos’, ‘#photoUploadPopupClose’, ‘#photoUploadBackgroundPopup’, ‘#photoUploadPopup’);
// Initialize the tagEditor popup
var tagEditorPopup = new popup();
tagEditorPopup.init(tagEditor, ‘.actionEditTags’, ‘#editTagsPopupClose’, ‘#editTagsBackgroundPopup’, ‘#editTagsPopup’);
});
For each popup instance, you need a separate script that defines the custom popup behavior. For example, the login popup script would look like this:
login =
{
handleOpen : function(popup)
{
//reset form
$(‘#loginMessage’).html(”);
$(‘#loginUserName’).val(”);
$(‘#loginPassword’).val(”);
$(‘#loginUserName’).removeClass(‘invalid’);
$(‘#loginPassword’).removeClass(‘invalid’);
//centering with css
popup.centerPopup();
//load popup
popup.loadPopup();
},
postLoad : function(popup)
{
$(“#loginUserName”).focus();
},
postInit : function(popup)
{
// Definitions for submitLogin and keyDownSubmitCheck are omitted.
$(‘#loginButton’).click(login.submitLogin);
$(‘#loginButton’).bind(“keypress”, {popup: popup}, login.keyDownSubmitCheck);
$(‘#loginUserName’).bind(“keypress”, {popup: popup}, login.keyDownSubmitCheck);
$(‘#loginPassword’).bind(“keypress”, {popup: popup}, login.keyDownSubmitCheck);
}
}
HI,
A very nice tutorial…..very easy to grasp….
For me the #button click is not showing a popup window though!
I really don’t know what the problem is…i had all the related files included on my main page.
I even tried your tutorial on my system! the same problem…seems like the css file is working fine
but something is pushing jquery file!
Any suggestions in these lines would be greatly appreciated.
Cheers!
Sam.
i found the plugin for jquery popup the link is and is very easy for use
http://www.dieroboter.com/jQPOOOP
or
http://code.google.com/p/pluginjquery
Thnx! I like that is pretty minimal and easy to read/adjust.
i did make 2 adjustments:
in the function centerPopup()
“top”: (windowHeight/2-popupHeight/2)+$(window).scrollTop(),
This keeps the pop-up in the middle of the screen even when scrolled downwards.
And a pointer/hand for the close button:
to keep it working in all browsers you need theese two css lines (in this order!):
cursor: pointer;
cursor: hand;
I have copied your code and tried it and it doesn’t work at all. Clicking on the button and nothing happens, All the connections are there htm linked to css and js file….What is the problem?
Hi Guys,
Can someone please help me modify this such that you can cick on href link and load the form, also is it possible to have more then one href refer to the popup form. for example, link1, link2, all open the same of differnt forms.
thank
Wow, it is very good web designer technique, thanks for share
There is a problem when using this in IE7 for some reason the font is not displayed as it should. compare FF popup with Ie7 popup you will see the font is not so smoth.
Do you have a fix or explanation for this?
There is an issue when displayng in ie7
to the popupdiv style
DISPLAY: block; FILTER: ; LEFT: 426px; ZOOM: 1; POSITION: absolute; TOP: 86px
there is the FILTER: ; which causes the font to look blury and bad if you take it oout dynamicaly with IE development tool bar it fixes it but i dunno how to make the script not generate this.
I’ve tried FILTER:none !important; int the style of the popupdiv in html but this is not fixing it
FILTER:none !important; causes the same problem
thanks for this, to fix browser resize height:
bind to browser window, use the resize event and adjust background and pop up content accordingly
can any one tell me how can i use this script on page load
Nice article.
Sometimes we may need a simple classical popup window using Jquery. Below link explains that:
http://www.tech-freaks.in/Java-Programming/Rapid-Code/jquery-popup-window.html
This is greate tutorial.
Hi im getting some error in popup.js (how can i call javascript from this popup.js file)
I am trying to generate a mysql result with the while function in php. I want to be able to click each line of the sql results and show the popup window with some info taken from the table pertaining to that specific line that was clicked. I put the hidden (popupContact) inside the while function alongside the regular results that will display. In the live page only the first result clicked pops up the popup box with proper info (meaning that it works) but every other subsequent line doesnt work at all (nothing pops up at all). Any suggestions as to why this would happen?
[...] How to Create a Stunning and Smooth Popup Using jQuery Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial. [...]
Is there anyway to make this pop up automatically or after a specific amount of time.
Great work, really smooth and impressive. Keep it up.
Cartell Car Check
Hi,
Great Tutorial! Got it going right away.Thanks!
Just one thing: I stumbled over a Minor bug, I had a situation where my example [and I was able to recreate with your example -- http://yensdesign.com/tutorials/popupjquery/, if you use the Click-Out method for closing, when you Click-Out again, it toggles to the Message again where it should be inert. Personally, I thought that was a bit over-much groovy anyway (I mean, if a user can't click an 'X'!?!) [FireFox 3.5.3]
Just thought you would want to know.
Okay, I am going to post a request.
Could someone create an easy to “view-source” example of doing this same thing by “instantiating an object” so that the example is a plain page (like your great and helpfully simple demo), that simply has *two* buttons, one that is “Press me please!” and another that says “No, press me!”, where header and the messages are different for example: “Title of the second instance of our Popup” and “Here we have a simple but interesting sample of our new stuning and smooth popup. Where jQuery can accept parameters for a different Title and Message…”
The original author has responded a couple of times, “just make it an object” or some such, and I don’t know what that means, and then Kon seemed to offer something amazing, but in all that it does (login popup, photo popup, cook-me-breakfast popup) the essence of what makes it work for multiple buttons on the same page is lost to me.
What I think would be best is to take the original example and change it as little as possible to allow multiple buttons with variable messages — when I can get that to work, I expect to be able to fill the Title and Message parameters via a PHP Object and a method of that object to render the code for a button/popup returned( $mssg = new message(‘My Button Text’,'My Title’, ‘My Message text here.’); echo $mssg->popup();). I know I can do that, and I would be happy to share that back if I get the help with the jQuery part.
Thanks to yensdesign for the original great jQuery example, thanks to Kon for attempting to show the multi button stuff — not your fault you went over my head , and thanks in advance to anyone that can create that dumbed-down example for me.
Ferdly
Well, for anyone out there that doesn’t know for sure, but wants to poke around with me, here is what I have tried and stumbled over (after reading a couple Primer’s on jQuery, and absorbing only some of that):
1. I created an example where I replaced all the id=”" attributes and changed them to the exact same, except as class=”" attributes (button, popupContact, etc). In the css and js files I changed all ‘#’s to ‘.’s — essentially using the original example based on a class rather than an id. It worked!
2. I added my second button. It worked!… Unfortunately, now the first button also pops up the Second Message.
That is understandable, I think it has something to do with jQuery always returning an array, and it would seem to FadeIn all the elements, the second one just happens to be on top. What I know I need to do, but am too bad at jQuery to do, is to also assign an id (probably incremental whole numbers (id=”0″,id=”1″,id=”2″,id=”3″… the same way jQuery increments its arrays) and somehow rewrite the popup.js to be aware of which button’s ID was clicked, and then only transform the DOM from “display: none” to “display: block” for the components with that id Since I think you are only supposed to use an id once, I put the whole block [button and message] inside a div with the id. I did change the html successfully, and it didn’t break the (working but flawed) example, so that seems reasonably close.
The way I learned the “display:none/block” stuff was to watch it happen in Firebug — very cool, you kind of really see what jQuery is doing for you with fadein/fadeout!
Now just have to learn enough jQuery to make it aware of the id, I think….
I wanted to share this, what I think is a piece of the puzzle for multiple popups per page.
Finally, as I was trying to get a picture of exactly what was happening as I clicked the button I stumbled upon the fact that this code is also very elegant and nice as an alternate option if you disable the show-background code. The message appears elegantly over the current page. (I added some lorem ipsum below the button to test this.) In my putative php object, it would be cool to allow this to be boolean “$mssg->obscureBG = false;”.
Another step forward…
Inside the loadPopup() function I change the line:
$(“#popupContact”).fadeIn(“slow”);
to:
$(“div#”+$which+” .popupContact”).fadeIn(“slow”);
As I mentioned before, the id is now a class (popupContact) and the div id is the parent div that I put around the whole block (button, title, message).
When I explicitly set $which to 0 it pops the first (original) message, and when I explicitly set $which to 1 it pops the second (alternate) message.
Pretty close…
However, I have been trying everything I can think of to assign $which contextually to the parent (grand parent, great-grand parent) div id of the button clicked (I have listed some below) but nothing works. Maybe it is about gathering it in the ready() function and passing it to loadPop() as a parameter, but my first attempts at that have failed.
var $which = $(this).closest(#);
var $which = $(this).parent().attr(“id”);/* I tried from zero to seven .parent()’s */
and so many more, each of which with and without the “$(this)”…
So I am more confident than ever that it is possible, and I know I can assign a div id from an object via a static (incrementing on construction) property.
It is just about finding the magical concatenation of characters that tell javascript to assign $which to the id of the of the of the of the that I clicked. I trust this is simple to someone out there.
Thanks…
oops, put html by accident in last paragraph:
It is just about finding the magical concatenation of characters that tell javascript to assign $which to the <div> id of the <center> of the <div> of the <input type=”submit”> that I clicked.
Hi,
I would like to create this popup window directly from a hyperlink. And not redirect to another page to press the button. How would I go about doing that?
[...] 1. How to create a stunning and smooth popup using jQuery [...]
Thnx, it’s really helpful,
i have used this jquerry,but the problem is in my page there are lot of dropdown list,the back ground water mark doesnot work for drop down,the drop downs are still acessable while the pop up is open, my browser is ie6
IE6?
You my friend have much larger problems than watermarks not showing up.
Hi. The “popupjquery.rar” is not decompressing… help!?
It worked beautifully!! Thank you so much Yens!!!
[...] 11)how to create a stunning and smooth popup using jQuery [...]
Works like a charm ! Please, just FIX where it says ” if(e.keyCode==27 ” those two ampersands that should follow got parsed wrongly by the blog, that’s the only error.
I copied the code to test and kept getting errors that it was missing a closing ) but I don’t see that.
Thats Stuff is Cool Man,But I Think U should keep the downloadlink at the top of the page,thanxs
Thanks so much this is great!
hello , thanks for the scripts .. I was looking somefing just like that ………. thanks again …..
One thing … In my browser I saw these code like following :
if(e.keyCode==27 &amp;&amp; popupStatus==1)
I replaced the ” &amp;&amp; ” part with && and the script isworking . ……..
How can I open the popup without cliking on the link? I would like to open the popup when people come to my site.
Nice tutorial.
But i’d like to learn the way, how can we land the popup without pressing the button.
e.g. : i want the popup appear on my opening page (index.html), as the page is loaded, without pressing any button.
Thanx from now.
[...] #18 – Create a Stunning Popup with jQuery [...]
Hey mate,
That does not work with IE8 on XP but good job.
For those of you who want the pop up to appear as soon as the page loads, rather than when you click a button do the following:
Find the following line of code in “popup.js”:
$(“#button”).click(function(){
and replace it with:
$(window).load(function(){
Deniz O it says right in the tutorial how to make the popup appear when the page loads. You use $(document).ready(function(){
Love this tutorial but I have one question, I’d like the pop-up window to appear when a user selects an option from a dropdown menu instead of using a button.
I changed the click event to a change event and it works fine except that when a selection is made the pop-up window appears and just as quickly it disappears – see below
$(“#button”).change(function() {
//centering with css
centerPopup();
//load popup
loadPopup();
});
Can anyone assist me here?
Cheers
[...] Create a Stunning Popup with jQuery [...]
[...] Das etwas andere Popup mit jQuery [...]
[...] How to create a stunning and smooth popup using jQuery | yensdesign Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show (tags: jquery javascript tutorial ajax css programming web design) [...]
I have been trying to use the jquery validation plugin in a form with popup, but the validation doesnt kick in for the popup. Any idea why?
hy,
still nobody found the solution for multiple divs (an unknown number of divs created in a repeater for exemple)?
I have just found the solution. If anyone interested mail me at: [email protected]
You are welcome,thank you!!
Thanks a lot for this script.
Could you help me?
I’m trying to adapt this code in order to open this pop-up when someone arrive on my website, and not on a click?
Thanks.
[...] on my website. To do this, I need a JQuery in-content popup that fades in to the page. In fact, this is a perfect example of what I want. However, I need it to appear onload. In addition, it should [...]
Hi! I managed to get a pop up loading with pub when you get to the front of my page(index.php). It’s a joomla based site. What happens is that it loads every time you load a new page on my site. I would like to make it pop up only on the first time you get to the site. I think using session is the best thing, but i have little codding experience.
I have my pop up running, adding this line on my index.php:
include(pop.html)
Can anyone help with this?
Thanks in advance!
Regards!
Hi! I managed to get a pop up loading with pub when you get to the front of my page(index.php). It’s a joomla based site. What happens is that it loads every time you load a new page on my site. I would like to make it pop up only on the first time you get to the site. I think using session is the best thing, but i have little codding experience.
I have my pop up running, adding this line on my index.php:
include(pop.html)
Can anyone help with this?
Thanks in advance!
Regards!
Hey its works gr8 with html but when i am trying to implement it in my .net site its wont work properly.. any suggestion please….
Hi guys.
Any solution for IE8? It does not work.
Thanks
[...] How to create a stunning and smooth popup using jQuery [...]
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/
Great stuff! Thanks for sharing
[...] How to create a stunning and smooth popup using jQuery [...]
[...] How to Create a Stunning and Smooth Popup Using jQuery Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial. [...]
[...] I have noticed the need to create a slick jQuery windowless popup increasingly more often in the past couple of months. Below is a very basic and bare bones setup for setting up just such a popup which is adapted from Adrián Mato Gondelle’s tutorial on how to create a stunning and smooth popup using jquery. [...]
Hi,
I ‘m a newbie to js. If i try this i don get the result. There is something wrong in my implementation. Can you guide me how to do this ??
GR8 man, thnxx a ton!!!!
u r a savior!!!
Really cool! That’s a pity it… does not work.
[...] Ciekawy efekt pop-up z użyciem jQ [...]
I dont have words to thank you enough mate. I’ve beem strugglilng for more than a month to code something like this … i was screwing the basics .. but i have it now … Thanks a ton mates.
Thanks again. God Bless You !
Hi
Very good explanation and its very helpful. Can i download js files to use from local server?
Vijay
Thanks a lot for at great tutorial
How can I have it popup automatically? I’m pretty sure it has to do with the last part of the popup.js file.
Appreciate it very much,
John
This is one of the better ones that I’ve seen?
This pop is activated with a button and input field. How can I modify the script to include it in a text link rather than a button and input field? Thanks.
Question: How can I modify the script to activate it in a text link rather than a button and input field? Thanks.
This is indeed one of the better pop ups that I’ve seen.
thanks for sharing poupup
Hey, us newbies wanna do cool stuff too. Can you please make a “For Dummies” version of this? Learning this stuff via Google on breaks at work.
Stunning work!!
I have spent hours looking for this exact popp However I have a few questions
1) Can I have the popup automatically load when someone visits my homepage?
2) All I require for the actual popup is to display some information (text and image) and then they exit once read.
Your help would be greatly appreciated.
Regards,
Alex
[...] [...]
Hi! I have a question!
I want that the pop Up appear automatically when I enter to the site and only when I enter to the site!
How can I do that? o.o
Thanks men! Clean and very usefull
What if i want the popup to start at the beginning? Sorry I am new
Excellent! Thank you a lot! Congratulations!
Almir Campos.
Sao Paulo, Brazil.
hi, how to load the popup automatically on page load without click function?
thanks
its g8. . .
[...] Pop-up windows [...]
Unrelated note: Your website is dog slow grabbing things like images from other websites.
looks good. is it possible to have onclick colorbox sliding on the page.
It’s really amazing plugin, i was strugling with a old js code and didn’t get a stylish look but here i find my solution thanks mate. i added a delay() function and set it onload with dealy of a specified time so it becomes more useful for me, thanks.
Have you considered using CSS to center the popup instead of javaScript?
If you use
left: 50%;
margin-left: -204px; (or 1/2 of the box width)
I have had luck with that.
Man it’s beautiful but can anyone tell me how to set auto-close setting please ?
[...] How to create a stunning and smooth popup using jQuery [...]
Hi Yens,
i’m new to jQuery and i’m using Firefox 3.6.13 and when i’m trying to run the code it says:
Error: missing ) after condition
Line: 52, Column: 25
Source:
if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){
Without the lines:
$(document).keypress(function(e){
if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){
disablePopup();
}
});
it works fine (without the possibility to close the popup without Escape)
Anyways: Thanks for this great and very useful tutorial!
[...] [...]
[...] 2. Smooth Popup Box [...]
Thanks… Really its amazing..
Thanks a lot
very nice effort and easy to follow
working like a charm
cheers
Hi Adrian,
This is a cool tutorial! Thanks for sharing it. I have one question for you though. How can I make a multi pop ups?
For example, you have 4 links(buttons) on the web page. You would like to present a different picture from each link on your popup content.
How would you do that? It would be deeply appreciated if you can give me some information.
Thanks in advance and look forward to hearing from you soon.
Sincerely,
Ryan
Great stuff man!! I have created popup bt m nt able to disable backround div.. links on bachground page are still clickable and so page crashes.. Please guide.. thanks in advance..
*background
Brand new to jQuery but have been using JavaScript since the beginning. Great tutorial. Blessings.
very nice, its working at my site, but i want to delay its loading time. eg 1 min
how to do?
[...] 1 ) stunning and smooth popup using jQuery [...]
[...] stunning and smooth popup using jQuery [...]
It doesn’t work if I put the button in a and also if I put a onclick=”loginForm.submit()” in my tag.
I would like to have a popup just like your’s, AFTER I submitted my form, so after all my fields was filled up and I have click on the button. But your popup doesn’t work and it seam very diffcult to find something like your jquery popup, but for a form…
Great tutorial… thank you very much..
How would I go about creating a javascript object (using javascript or jquery) to create multiple objects so I can reuse this for multiple popups? Thanks.
Hey Adrian,
Pardon me for being a newbie, but I don’t see where you link img1 and img2.
I have the following code to display the image, –at ttp://www.matalasco.com/childpages/jQueryPop-Up.htm — but nothing happens when I click.
x
Clemencia, yay!
. . . I’ve searched general.css, popup.js and index.html with NP++
Cannot see where you link img1 and img2 or how to make my image pop up.
Any help will be much appreciated! Thank you,
Peter
[...] Referans site [...]
Success! (There was a left-over line in the web page that was breaking it.)
Thank you for a great tutorial!
Good example
Awesome..
[...] http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ [...]
This is an incredible tuto’ you have here!
Thanks!
Excellent popup! Thanks…
Awesome, man. It was really useful, helped me a lot
hello … its possible, eliminate the popup button and immediately show it ????,,,,,,, finally, you can ad links to the image???
thanks
I have read entire comments and I didn’t found an answer to my problem: in html example the popup works just fine. I want to put an exit popup on my website (which is in php), but nothing happens. I put the div section (which displays the popup box) just before the body tag of the template. In the head section I’ve added links to js files (jquery-1.3.2.min.js is already on my website). I’ve added the css in the stylesheet file. It supossed to work, but it doesn’t: http://www.micromall.ro. Any suggestions ?
[...] stunning and smooth popup using jQuery [...]
[...] Tutorial [...]
Great tutorial. This is exactly what i looking for right now, ready to apply pop out jquery. Thanks..
Thanks a lot! It took me a while, but I got it working.
There is an odd artifect in the javascript though:
if(e.keyCode==27 &amp;amp;amp;amp;&amp;amp;amp;amp; popupStatus==1){
The “&&” got multi-escaped.
Tip for WordPress hackers: if you get the error “$ is not a function”, then replace all $ signs with “jQuery”
Source: http://elementdesignllc.com/2009/08/wordpress-jquery-is-not-a-function/
(if not working: http://webcache.googleusercontent.com/search?q=cache:urgYNaLbh14J:elementdesignllc.com/2009/08/wordpress-jquery-is-not-a-function/+Error:+%24+is+not+a+function&cd=1&hl=en&ct=clnk&gl=nl&client=firefox-a&source=www.google.nl)
Great! you save me much times Yens. It is easy to understand.
[...] yazıyı hazırlarken kullandığım kaynaklar: yensdesign ve [...]
[...] yazıyı hazırlarken kullandığım kaynaklar: yensdesign ve [...]
Love the code, but i have an issue with it, you see i have a link in my footer.
So when a user clicks on it it will show my recent updates it works, only problem is when
ever it opens it pops up at the very top you have to scroll all the way back up to see it.
Just wondering if it was meant to do that or just a but in the latest firefox? I would assume
it would popup in the users current viewing area not way up there lol.
Thanks a lot!
This tutorial made me wanted to start exploring the huge field called jquery!
Thanx a lot, so helpful
[...] How to Create a Stunning and Smooth Popup Using jQuery [...]
Thanks so much this is great!
[...] 1. How to create a stunning and smooth popup using jQuery [...]
Any solution for IE7? It does not work.
Thanks
[...] 1. How to create a stunning and smooth popup using jQuery [...]
Great Stuff,
i need to open a external url from the popup and i used iframe.it works perfectly but its not gettin greyed out.
x
Thank you for posting this script. It was very helpful.
Regards,
THANKS! It workded for me… Its awesome.
Hi, is anyone else using this and it autocloses once the popup window is open for a few seconds? I didn’t modify the code but it auto-closes and I don’t want this to happen.
Can you explain to me how to create three different popups on one page?
Link1 = popup1
Link2 = popup2
Link3 = popup3
Seems like the css & js files are only able to do one popup.
Your popup is GREAT found here;
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
It handles most of what I need but I suspect I am missing something either very hard or so easy, that no one addresses it. In addition to opening the pop up in Javascript, I would like to instantiate it from VB.NEt in a code behind page. I can not figure out how to open it from VB.Net and provide a parameter that is the message.
Any help is GREATLY appreciated.
thanks you are so helping
Hi,
I have a problem while executing it locally. The document.documentElement.clientWidth is 0 in case of Internet Explorer 9.Please help.
awesome article loved it…i was using lightbox and it was creating two divs for same form..ur artile helped a lot
Awesome, thanks for this!
This tutorial is really worthwhile. I enjoyed it.
Thanks for this.
internet explorer 8 threw an exception around the “$(document).ready(function()” object required, all other browsers were okay…!
Splended article . waiting for more articles based on jquery . thanks for this great post
Hi !
Thanks for your tuto !
I have a question !
I’m opening an iframe in the popup with a target and if i put the iframe code into the popup the background don’t appear !
Like that :
x
Accès à la vidéo
If i let the script like in the example there’s no problem :
x
Accès à la vidéo
Any content…
Any idea to help me ?
Regards,
Fred
I made the #button a class .button instead, and it works for multiple pop ups. Is this a bad method?
I’m using this beautiful popup as a profile for a team roster.
Nevermind. it didn’t work
with this litte code you can create the popup with a function
function createPopup(theTitle,theHtml){
var xdiv= document.createElement(‘div’);
xdiv.id=’popupContact’;
document.body.appendChild(xdiv);
var xclose = document.createElement(‘a’);
xclose.id=’popupContactClose’;
xdiv.appendChild(xclose);
$(xclose).html(‘X’);
var xtitle = document.createElement(‘h1′);
xdiv.appendChild(xtitle);
$(xtitle).html(theTitle);
var xbody = document.createElement(‘p’);
xbody.id=’contactArea’;
xdiv.appendChild(xbody);
$(xbody).html(theHtml);
var xdivbk = document.createElement(‘div’);
xdivbk.id=’backgroundPopup’;
document.body.appendChild(xdivbk);
preparePopup();
//centering with css
centerPopup();
//load popup
loadPopup();
}
Works great in IE 8. Thanks for a great tutorial!
thx mate., i need this stuf., but can i insert embed PDF with the pop up?? thx before
[...] Smooth and Stunning Popup from scratch This entry was posted in JavaScript, jQuery and tagged drop-down, form, jQuery. Bookmark the permalink. ← Hello world! WordPress: How to set the display order of custom post type → [...]
Great resource. Thanks
great work….but not working inside a form tag in asp.net…please give any tips for that
[...] How to Create a Stunning and Smooth Popup Using jQuery Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial. [...]
thanks a lot.. it works exactly what i wanted.. thank you
I’m trying to add the pop up to a Jquerry map hilight hotspot. I have no idea how to make the hot spot Href”" point to the popup. I know there is something having to do with your page working from a Button input.
My knowledge is limited – maybe this is beyond me?
thanks for the tutorial,,
very nice tutorial,,
This is great. Thanks for sharing this guys, it is really helpful.
Keep up the good work.
Thumbs up from me.
cheers
I think this is one of the such a lot significant info for me. And i am satisfied studying your article. But wanna commentary on some general issues, The site style is ideal, the articles is truly excellent : D. Just right activity, cheers
Thanks a ton.
is it possible to make it automatically pop-up?
I want to put it at my homepage where it will pop-up first.
Very helpful, it could be a good extension for RSS subscription
I know this post is from a while back but it was just what I needed. I was going to find a plugin but most of them were a little heavy for the case I needed and I didn’t want to have to support code I didn’t understand.
I noticed that the ‘esc’ key to close doesn’t work in Chrome.
Great job! I’m going to have to read your blog now that I’ve stumbled on to it.
This is a awesome tutorial, but I am trying to get this to run with ASP.net in IE8 and Chrome, and nothing is working. I have added parts of the CSS to my existing CSS and included the latest jquery library. I see it run through the code without error, but nothing shows up. Any help would be appreciated.
I would like this pop up window to be draggable, using the jQuery UI draggable function. I am having a little trouble doing this though. Any help would be appreciated.
very usefull
Hey Man! Loved your popup here worked perfectly in all browsers! i have tried incorporating it into my own website and it doesn’t seem to work in IE anymore Just wandering if you could point me in the right direction as ive looked everywhere but find a cause or solution for the problem!
karlkilbourne.co.uk
Thanks
Karlk!
Yens,
This is a great work! Explained the concept with easy english and nice way…! Keep this attitude everytime, everywhere!
God Bless Yoi!
Thanks once again,
Keep Writing!
thanks so much for the tutorial
had to add the following modification for the jquery code to work
(function(popmanager){ //your jscript here })(jQuery);
Really Good ………
it help me a lot …….
thanks
Thanks for script
I created Drupal module, you can download it from page: http://www.openbit.pl/files/popup_message-6.x-1.0-beta1.tar.gz
Thank you very much..
It’s very helpful!
the popup open from a button and button has one ‘id’. so if i want to use the same popup from different buttons on the same page then how to achieve this, because we cannot have same button ‘id’ on the same page.
thanks
for exampla
sanliurfaburada.com
great tut man, helped me alot.
thanks alot and stay safe.
I’m having a problem having to implement this into my site. I don’t have a div for a button but I have a navigation in a list.
blog
I would like to know how do I set the jquery section in the popup.js file to work with my contacts list button.
//LOADING POPUP
//Click the button event!
$(“#button”).click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
Thanks for your help in advance.
Is it possible to use this style pop-up to display a gallery (ex. Galleriffic or SlideViewerPro) so that when I click the main button (ex. “press me please”) it loads the jquery popup that will display a thumbnail based gallery viewer?
great tutorial, love jquery, absolutely fantastic!!
thanks for sharing
HIya, great work. However, if I want to call this PopUp window to display differect text depending on which button is clicked, how would i implement that? Do I create a second version of it or is there a way to pass a parameter which choses which popup to display?
Hi nice site and Gr8! source of tutorial, i have issue with below, i ma unable to adding multiple buttons can u pls help me to fix
/***************************/
//@Author: Adrian “yEnS” Mato Gondelle
//@website: http://www.yensdesign.com
//@email: [email protected]
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$(“#backgroundPopup”).css({
“opacity”: “0.7″
});
$(“#backgroundPopup”).fadeIn(“slow”);
$(“#popupContact”).fadeIn(“slow”);
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$(“#backgroundPopup”).fadeOut(“slow”);
$(“#popupContact”).fadeOut(“slow”);
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(“#popupContact”).height();
var popupWidth = $(“#popupContact”).width();
//centering
$(“#popupContact”).css({
“position”: “absolute”,
“top”: windowHeight/2-popupHeight/2,
“left”: windowWidth/2.04-popupWidth/2
});
//only need force for IE6
$(“#backgroundPopup”).css({
“height”: windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$(“#btn”).click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$(“#popupContactClose”).click(function(){
disablePopup();
});
//Click out event!
$(“#backgroundPopup”).click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Hi,
Can you show how to return values from popup back to parent in jQuery?
Thank you in advance. jQuery Documentation seems not explaining this.
[...] How to create a stunning and smooth popup using jQuery [...]
Hi,
I implemented the same code in VS 2008. I added the reference to all the files.
PROBLEM- The pop up closes only when i press ESC key. It does not close when i press X or when i click out side the center popup.
Can anyone please help me ? I need it asap.
Thanks.
Thank you so much, it was nicely explained.
Current version of Drupal module: http://drupal.org/project/popup_message