Ashley Sheridan​.co.uk

Popups That Always Work

Posted on

Tags:

"My popup windows don't work with Javascript turned off. How can I make them always work?"

This is a question I see fairly frequently popping up on forums and mailing lists. Popup windows can be a pretty useful thing when used correctly, but in terms of accessibility, relying on Javascript for navigation is a bad thing.

There is a way that you can still use that popup, without causing problems for any of your users, and that is to use links.

<a href="somelink.html" target="newWindow" onclick="window.open('about: blank', 'newWindow', 'width=300,height=400');">get more information on somelink.html</a>

This will do one of the following, depending on whether or not Javascript is enabled on the browser:

  • Javascript on: open a new window sized 300×400 pixels and then it gets populated with the contents of somelink.html
  • Javascript off: Open a new window or tab (depending on browser) with the content of somelink.html

This way, the Javascript is correctly being used to enhance the experience of the user, rather than determine it. The key part here is the target attribute, which targets the window Javascript opens up. As the onclick is called before the browser processes the normal behaviour of the link, the new window is opened up to the correct size, and then populated.