How to throw a pop-up properly with Javascript

This is a translation from my original post in spanish. Hope you enjoy it!

In some cases it can be useful for us and even more comfortable for the user to open a page in a pop-up on which to show the information. If we search in Google how to do it or read any javascript manual the code that will be shown its this one:

window.open('url to open','window name','attribute1,attribute2')

In fact, that code has some mistakes, lets see:

  • Browsers without Javascript will cannot open the page.
  • It will not be crawled correctly by searchers, and some crawlers, will not know how to follow it.
  • When going over it with the mouse we will not see the url on our browser status bar.
  • The user loses the option to make a right click and decide to open it in a new tab, a new window or just copy the url.
  • The user loses the option to save the page into his favourites using the mouse’s right botton.
  • Finally, “a” labels have a reason to exist which is specificated in the W3: “A link is a connection from one Web resource to another“, so to use it to show an appearence but make it work through the onclick doesn’t seem the best way to follow standards.

This is the correct way to open a pop-up:

<a href="./index.html" target="_blank" onClick="window.open(this.href, 
this.target, 'width=300, height=400'); return false;">Abrir pop-up.</a>

This way, the link it’s a normal link that will work under any circunstance and, besides, in the most usual conditions it will work the way we want: opening a pop-up.

One thought on “How to throw a pop-up properly with Javascript

Leave a Reply

Close Bitnami banner
Bitnami