target _blank – Open a new window using jQuery/CSS

One of the reasons why people are looking at a scripted solution is that the target=”_blank” attribute isn’t valid in all doctypes (for example XHTML Strict).

This is a simple little trick really. There are a couple of ways of doing this but a method that I’ve personally liked is one I started using some time ago that combines jQuery and CSS together, which is a good and valid approach.

The jQuery:

$(function() {

Then we can garnish it with a bit of visual sweetness, the CSS:

.external-link {
  background: url(img/icon_external_link.png) center right no-repeat; padding-right: 14px;

Finally, here is the HTML that the CSS and jQuery hook onto;



  • That web user know that this site best works with JavaScript ENABLED.
  • The image folder is a CHILD of the CSS PARENT folder.
  • The image is a PNG and is called “icon_external_link”.

What you end up with is an anchor tag being caught by the scripted function via a class which you can use globally across your site. The CSS is there just to provide some visual garnish telling the web user that the link will open up a new page.  This is good IA practice too.

This is only an example that you can use and build upon so use as you see fit.


  1. jordan 12 rising sun says:

    Normally I don’t learn post on blogs, however I wish to say that this write-up very pressured me to take a look at and do it! Your writing taste has been surprised me. Thank you, very great post.

  2. Georgiana says:

    I’m a bandwagon but what Ever truth is

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.