Creating beautiful pop-ups using jquery : 84 Bytes

Creating beautiful pop-ups using jquery

Richard Wong 17 August, 2008

When it comes to pop-up windows, people don’t really associate them to being accessible and they are some what annoying. But sometimes it is necessary for whatever reason.

If you think about it, a link that opens up a new window is one of the most simple thing you can do with javascript & HTML. There is no reason for it to be ugly.

This is the old fashion and totally wrong way of doing it:

<a href="javascript:window.open(http://www.popup.com/);">Popup link</a>

Why? The a tag is not linking to a link but instead it is running some javscript. That means the whole meaning of the link is gone.

Here is what an accessible and clean link looks like:

<a href="http://www.popup.com" rel="pop-up">Open a Popup</a>

In this version, there is no inline javascript which is always a good pratice to separate HTML and javascript. It keeps everything simple and clean. The addition of the rel attribute is used to describe the relationship between the current page and the href destination of the anchor.

Now we have this beautiful HTML link. It is time to do some magic with javascript and jQuery.

( function popup() {
        $( document ).ready( function() {
                $("a[rel='pop-up']").click(function () {
                    var features = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
                    newwindow=window.open(this.href, 'Popup', features);
                    return false;
                });
        } );
}() );

This is a very simple javascript using jQuery. Basically, the code is looking for all the links with the rel attribute and assign a onclick event to open the pop-up window. Of course, there are different ways to abstract the above code to make it more flexible. But the idea is to have beautiful pop-up link and have the javascript to do the work later.

Comments so far

olimp January 6th, 2009 at 12:15 am
doesn’t work in IE
Bob June 17th, 2009 at 9:57 pm
So much work for no demo, really no demo????
Steve July 21st, 2009 at 4:40 pm
Working fine in all browser..thanks…
Matthew Fedak November 21st, 2009 at 2:21 am
Thanks for this example Richard, your a life saver, no working on putting a file manager style interface in the popup and configuring the javascript to work with the page the pop up came from.
gopal kanjolia December 1st, 2009 at 10:39 am
this popup window i don’t like
Christo December 14th, 2009 at 4:30 am
Wheres the freakin demo dude? NEWB.
Rony July 22nd, 2010 at 5:41 pm
Its working fine though there is some problem in IE older versions. However would like to view some demo and also it would have been gr8 if the popup was bit stylish
harry September 6th, 2010 at 6:14 am
its a just a link
Wilma J February 22nd, 2011 at 1:47 am
I LOVE IT. Just the answer I needed and no tweaking.
Ajit Kumar Singh August 4th, 2011 at 12:00 pm
That is really amazing code. I will use it for my admin panel
commonsenseappeal August 29th, 2011 at 4:30 pm
Why would you ever need a demo? It’s a popup! You’re a NEWB if you don’t know what a popup looks like!

Trackbacks/Pingbacks

Pingback from A useful list of JQuery Code and plugins - Part 1

84 Bytes