You are here: Home » All Posts » JavaScript Popup Windows » JavaScript Popup Windows

JavaScript Popup Windows

in JavaScript Popup Windows

JavaScript popups are handy to display help information or to zoom in an Image.

There are different types of Popups. The first type is a new browser window opened using the window.open() function. Such types of Popup windows were overused and exploited by many websites during the earlier days of the web. This resulted in the later versions of browsers blocking popup windows. Eventually, popup windows became almost extinct now. Automatically opening popup windows is considered a very bad practice.

Div based popups

Div is a block of content enclosed with the <div> and </div> tags. Unlike the browser window popups, div based popups are less intrusive and are often very useful.

There are a number of ways to use a popup.

Tooltips

JavScript tooltip

Tooltips are useful pieces of information displayed usually on moving the mouse cursor on top of an element.
(like an image or a link). The qTip jQuery plugin is good to show tool tips.

jQuery is a great JavaScript Library. You can learn it here

Here are the steps to create some cool tool tips:

For the elements that you need the tooltip, give a unique id attribute. For this example, we add an id attribute to the hyper link like this:

<a href='#' id='link_example1'>The tooltip Link</a>

Now, add the following code to your page within the <head> and </head> tags:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });
});
</script>

The first line adds jQuery to to your page. If you already have jQuery included in your page, no need to add that line.
The second line adds the tooltip library qTip. (You can download the script from here and don’t forget to upload the script to your website )

The line below creates the tooltip:

$('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });

As you might have noticed, this attaches the tooltip to the element with the unique ID link_example1

See the jQuery tooltip demo here

The qTip jQuery plugin has a huge set of customizable options. See the documentation.

Popup on clicking a link

Colorbox is another good Popup jQuery plugin. The example below shows how to open a modal popup when a link is clicked

First, the link:

<a href='content_help.html' id='link_content' >Help Link</a>

Notice that the link points to ‘content_help.html’ we want to open ‘content_help.html’ in a popup.

Now, the popup code:
Put the code below between <head> and </head> tags of your page.

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function()
    {
        $('#link_content').colorbox({opacity:0.3});
    });
</script>

Notice that the ID of the link is link_content.

The code below opens the popup.

$('#link_content').colorbox({opacity:0.3});

You can provide any valid link (like an image ) in he href attribute of the link. The colorbox plugin grabs it and puts it in the popup.

See the Popup demo here

For more options and customization, see the colorbox documentation page

Opening a popup on loading the page

We can use Colorbox plugin to open a popup on loading the page as well.
Here is the code (put it inside <head> and </head> tags of your page ) :

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $(window).bind('load',
        function(e)
        {
            $.colorbox({opacity:0.3, href:"offer.html"});
        });
});
</script>

The code opens the page “offer.html” in the popup:

$.colorbox({opacity:0.3, href:"offer.html"});

See the popup demo here

Delayed popup

A slight change in the code above can delay the popup for a few seconds.

$(function()
{
$(window).bind('load',
    function(e)
    {
    window.setTimeout(function()
        {
         $.colorbox({opacity:0.3, href:"offer.html"});
        }, /*timeout->*/ 2000);
    });
});

Delayed popup demo

You can download the samples here

Be Sociable, Share!

{ 22 comments… read them below or add one }

Mahrukh Hashmi April 6, 2013 at 9:28 am

this make easier how to create pop up windows

Reply

Mr Traidatmui March 17, 2013 at 6:02 am
Levente December 11, 2012 at 10:25 am

Hi,

First of all many thanks for your nice job. Any way to put cookie option in the script.

Thanks

Reply

vignesh May 8, 2012 at 6:21 am

Help to solve

Escape key must not work in popup

clicking outside popup must be disabled

Reply

Tina April 20, 2012 at 1:59 am

Hi,

I have an online ordering system that I bought. I have coded it to run inside a frame of a HTML. This system uses pop ups. I have noticed that these pop ups do not load when I am using the system in safari inside the frame. The system works fine when it is not loaded in the frame and the pop ups are displayed. Is there some sort of code I should be using to allow pop ups in safari to run through the iframe?

If you could solve this you would be a legend in my eyes!

Thanks – Tina =)

Reply

sarita April 19, 2012 at 10:33 am

Hiii i want to show a form including file browsing by popup window on click of a link.
How can i achieve it?

Thanx in advance

Reply

Timmy April 10, 2012 at 7:51 pm

One code I’ve learned to make a pop-up balloon. All the text you use is:


document.write("Text to become the link with a balloon

If this appears correctly, it should say the text only, with nothing else. The title part is what makes the balloon

Reply

Charlie April 8, 2012 at 5:17 pm

First, thank you for this immensely useful code.

I have a quick question. It is possible to code this so the pop-up appears in front on any Javascript that appears on the page. There is a Javascript (Adsense) ad on the page which currently overlays the popup when it appears. Ideally, the pop-up would be on top of everything on the page.

Thank you very much

Reply

Timmy March 30, 2012 at 3:04 pm

I figured out a different way (just replace the Google URL with whichever one you want):

Text you want the link to be

The target=”_blank” makes it open in a new window, the text immediately in front of the tag is what the link text will be, and the title=”Whatever you want the pop-up balloon to say” makes it have the balloon.
This entire text was a single line of code. The only breaks in it should be those in the pop-up balloon text; pressing enter there would start a new line of text in the balloon, so instead of title=”Hello my name is Timmy” (which would, just for clarification, appear as Hello my name is Timmy), you could put title=”Hello
my name is Timmy, (which would appear as Hello
my name is Timmy).
I find it to be much easier.

Reply

T January 7, 2012 at 3:13 am

How can I place 2 of the modal-pop up onload scripts on the same page?

Reply

pppppp November 30, 2011 at 5:36 am

i want to create a popup window after registration of form and clicking on submit button

Reply

Jocuri November 13, 2011 at 2:00 pm

how can you handle with time for this code, I mean to onLoad just after 10 seconds

Reply

sahana November 7, 2011 at 11:38 am

Hi,
I want to have a Popup Page when a User logins in to a Share Point Page. The POP up page should load after 7-8 seconds after the user hits the page.

Reply

Jonah the codemaster December 12, 2011 at 11:41 pm

@sahana

something like this:

function NAMEOFFUNCTION()
{
setTimeout(“alert(‘YOUR TEXT HERE’),8000)

}

BODY STUFF HERE

Reply

amars October 23, 2011 at 11:24 am

hi how to create auto response mail in php

Reply

cielo August 31, 2011 at 8:07 am

i want to open a pop up when log in fails.. Help please????

Reply

pawan July 13, 2011 at 6:54 am

i want to open form in popup………..is it possible…….plze hlp me

Reply

baskaran May 20, 2011 at 1:25 pm

its helpfull

Reply

Alverant February 28, 2011 at 4:51 pm

This isn’t a “pop-up window” it’s an alert. A pop-up window is an HTML page.

Reply

prasanth February 28, 2011 at 5:23 pm

That part of the code was just to show event handling. The page on window.open shows opening an HTML page

Reply

Fabrizio Bartolomucci February 3, 2011 at 2:43 pm

Hullo,
I need to open a number of pop-ups in a window according to where the users passes its mouse. So I tried entering the window.open directive in the onMouseOver event of the various items but got entangled in the focus issue. If I handle the onMouseOut event by either closing the window or putting it out of focus, the popup starts flickering while the mouse is moved over the item, if on the other hand I dispense of this operation, the focus get stuck to the first opened popup and Ii is needed to click on the bottom window so to trigger the onMouseOver again.

How do I solve this issue?

Thanks,
Fabrizio

Reply

reddy January 23, 2013 at 6:50 am

i need to populate popup page with cancel and confirm buttons

Reply

Leave a Comment

Previous post:

Next post: