jQuery Popup

jQuery is not a new technology anymore but it is not an old one either. Most new website are using some form of jQuery. There are some things that you can do with jQuery that are simple but can make your website stand out. One of the ways that you can spread news or try to get people to interact on your site more is with a popup. Now some people might think these are annoying but can really help build more interaction. Popups don’t have to be annoying, they can be helpfully and creative. The thing that made popups annoying when they first came out was that people played music with them and they popped up automatically. Well that is annoying but what if you use it for a contact form or something for people to signup for feeds. There are a ton of things that you can use a popup for and with jQuery you will get something that is for the most part cross browser compliant. For this tutorial you will need to know html, jQuery, and css. So lets get started.

Step One – Create You HTML Template

One of the first things you will need for your html template is the jquery library script or an equivalent script. The google hosted jquery script or the jquery hosted latest script would work. I prefer to use the latest jquery script. The next thing that you will need to add is the css popup file and the js popup file. These will look like this in your head area.

After you add these all that you will have to do is add the code to create the popup. Well you will have to first decide if you want to use a button or a link. Both of these will work all that you have to do is add the class button to them. Then you will have to create the popup container and the contents of the popup. This should look something link this:

That is all for the html part. Now you will have to style the popup with the popup.css file.

Step Two – Design Your Popup With CSS

Inside of the popup.css file there are all of the classes that you will need to have setup. Hear is a list of the classes that you will need (popupContent, popupClose, and backgroundPopup). These classes will have to be coded like below:

Step Three – Build The jQuery Popup

Now that you hopefully have a sweet designed look for your popup we have to add the script to control the popup. All that you have to do for this is all the code below to your popup.js file.

Now if you copy that code and add it to your popup.js file everything will work. This script declares the width of your browser and determines where to put the popup automatically. It also declares the closing abilities. There are three of these you can click the x, push escape, or click outside the popup. There is nothing left your popup should be working great. Now this is a really simple jQuery popup. There are tons of popups out there and tons of ways to do these but most aren’t this easy and light weight on your browser. If you would like to see a demo of this in action you can click here or you can download this demo and mess around with this your self.

jQuery Popup (155 downloads)

Anyone that might use this and find some changes that make it better I would love to see these changes and put them up on the site with you getting credit. Please contact us.

About Shane

Hi I am Shane the main author of this blog. I am a self taught web developer. I have been working in this industry since 2008. I work a lot with WordPress, Magento, SEO & SEM, and custom built websites. I love all sports and I will try anything at least twice.

Working remotely is one of the fastest growing perks in the working world. It’s something that people talk about a lot, and it’s a solution to the “work/life balance” problem that bothers so many people. Most of us have asked the question, “Why do I work so hard?” For some people, there are many sides

Know little about the use of keylogger for Android? Wondering why so many friends choose free Android spy? What benefits can you get from tracking cell phones of your children and employees with the help of sms tracker? Keep reading and find the answers in this short article. Have you ever dreamed of taking control

As a photographer whether it be a hobby or on a professional level the realm of high dynamic range photography can be very troublesome without photo editing software specifically made for photo HDR. Aurora HDR photography can be very challenging as it is, but with Aurora the job gets a little bit easier. Some might

  • george

    Hello Shane, I’m playing around with your popup right now and I seem to have a problem with submit. On submit, the popup always closes. Is there a way to prevent the popup from closing, but still be able to do server side validation. This would make using the x button or clicking outside of the popup the only way to close the modal.

    • If you can shoot me a example I can take a look at it but what I am guessing is that you are doing server side that takes you to another page/url. If that is the case you would have to switch up your validation so that it doesn’t take you somewhere else on submit. More than likely you would have to validate with something like JSON validation. But if you can send me an example I can tell you more.