Home arrow Design Usability arrow Page 2 - Building Friendly Pop-up Windows

Building Friendly Pop-up Windows

A pop-up window is simply another resource for displaying content. Many advertisers abuse them, however, thus giving pop-up windows a bad reputation. They can be implemented in a friendly fashion that won't make your visitors angry -- and they can be very useful in certain circumstances, such as on an intranet. Alejandro Gervasio explains.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 48
February 02, 2005
  1. · Building Friendly Pop-up Windows
  2. · Addressing the problems with pop-up windows
  3. · The JavaScript function
  4. · Adding style to pop-up close links

print this article

Building Friendly Pop-up Windows - Addressing the problems with pop-up windows
(Page 2 of 4 )

When we’re working with browsers where scripting is disabled, the pop-up does nothing. It’s just that simple. Using standard <a href> expressions would help to solve this issue. The following code:

<a href="#" onclick="window.open('file.htm');">Click here</a>

is and old and inefficient way of opening pop-ups. We have to make sure not to intersperse inline JavaScript event handlers with HTML. They’re part of JavaScript, and should be coded within it. Even so, in order to make the link work, if scripting is disabled, we simply use:

<a href="file.htm" onclick="window.open('file.htm');return false;">Click here</a>

This way, if scripting is disabled, the standard link still works. The return false statement effectively cancels out the default action of the href section, so it won’t open the pop-up and the normal HTML windows at the same time. It will open one or the other. What’s more, if we want the window to open on top of the current window, just adding a target attribute will do the trick -- like so:

<a href="file.htm" onclick="window.open('file.htm');return false;" target="_blank">Click here</a>

The problem is now solved. But there are still some issues that need to be tackled. Let’s assume we’re using tools like Dreamweaver to keep links properly maintained. If we return to the code:

<a href="file.htm" onclick="window.open('file.htm');return false;" target="_blank">Click here</a>

The link above would be nicely maintained, at least for the "href" part. But the "onclick" section would probably be ignored. Again, the code might be changed to:

<a href="file.htm" onclick="window.open('this.href');return false;" target="_blank">Click here</a>

Now there is only one link to maintain, and the "this.href" expression would work for the "window.open" method. That’s pretty good! What about pop-up killers? As with the issue of JavaScript being disabled, by merely providing a standard "href" section, the link will still work.

In order to solve accessibility problems, the most common approach is to inform the user that the link will open in a new window, include instructions as part of the link itself, and add notes in a title attribute or using proprietary icons to indicate that the link will open a pop-up window.

Seemingly, we’ve found a decent solution to the common pitfalls with pop-ups. In fact, we’re still a ways from that. We’re working with ugly and confusing inline JavaScript handlers. It’s highly recommended, for good coding habits and easy of maintenance, to completely separate JavaScript from the HTML markup, as we’d normally do with server-side scripting languages. So our previous code:

<a href="file.htm" onclick="window.open('this.href');return false;" target="_blank">Click here</a>

is still not good enough, since the JavaScript code is embedded into the link. It would be fairly good to write a JavaScript function that will take care of solving most of the issues previously described, but keep our HTML entirely unharmed. Sound interesting? Let’s get our hands dirty and get ready for coding!

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials