Best way to Open a Popup

Although there are many problems associated with using popups, they are still useful. In this post, I will try to find the best method to open a popup. I only am taking about the 'real' popup here - not those wishy-washy pop-unders.

Aim

I was going through my old JavaScript Tutorials when I came across a page on how to create a popup using Javascript. I have just introduced the commands necessary to create a javascript popup(window.open) - I have not said how to associate it with an event.

That prompted me to create a post on the different methods of making a popup. Our basic aims in creating the popup are...

• Should work! The popup should, well, popup in all browsers supporting JavaScript.
• It should provide minimum functionality to browsers without javascript.
• Should follow the best practices in javascript coding.

Solution

Easy but Bad Method

The easiest way to open a popup - the default action of a link.

<a href="javascript:openPopup('popup.html')">Open Popup</a>

This is by far the easiest and worst solution. In this example, the default action is calling the javascript function. So why is it bad?

• There is no protocol called 'javascript:'.
• If the user have turned off javascript, they get nothing.

We cannot try href="#" onclick="openPopup('popup.html')" for the same reason - if the user don't have javascript turned on, they can't see the popup - or its contents.

A better Popup

A better solution is

<script>
function openPopup(url) {
 window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
}
</script>
...
<a href="popup.html" onclick="openPopup(this.href);">Open Popup</a>

If the user don't have javascript turned on, they will be taken to the 'popup.html' when they click the link - if they have javascript, the popup will be opened.

The problem with this script is that the default action takes place along with the desired action - the popup opens - but the user is taken to the 'popup.html' page. We solve that problem like this...

<script>
function openPopup(url) {
 window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
 return false;
}
</script>
...
<a href="popup.html" onclick="return openPopup(this.href);">Open Popup</a>

This will give us the desired result - but there is one problem - this approach demands the inclusion of behavior element(javascript), ie. onclick="..." inside the content of the page. We should try to separate these two layers.

Best Method

The best approach, is this...

<script>
function openPopup() {
 var url = this.href;
 window.open(url, "popup_id", "scrollbars,resizable,width=300,height=400");
 return false;
}
function init() {
 var popups = getElementsByClassName("popup");
 for(var i=0;i<popups.length;i++) {
  popups[i].onclick=openPopup;
 }
}
window.onload=init;
</script>
...
<a href="popup.html" class="popup">Open Popup</a>

To make a link a popup, all you have to do is add the class 'popup' to it.

For this to work, you must have the getElementsByClassName() function - I hope you have it in your common.js file.

Filed Under...

• web
• development
• javascript