Create Pop-ups Without Dead Links

Share this article

They’re the topic of many a heated discussion on the Web, and the favourite toy of evildoers who want to annoy us with “in your face” advertising — pop-up windows.

But, let’s not judge the tool by the villain who handles it. Indeed, there are times and conditions in which a pop-up can be a desirable effect; these conditions usually arise in Web applications rather than Websites, though.

One of the major drawbacks of pop-up windows is their dependency on JavaScript. Javascript is a great tool for enhancing markup to become interactive without reloading. Yet, we should be aware of its problems.

It is ridiculously easy to create a pop-up window, and there are many outdated tutorials and code generators that can lure you into thinking that a link with javascript:window.open() and the appropriate parameters is all you need to create a great pop-up.

Unlearning What You’ve Learnt

Let’s not waste time discussing why this is wrong — a lot of other articles, such as this evolt tute, and this article on A List Apart, have done that already. Let’s instead think about the problem at hand and find another way to achieve a good outcome.

For some good reason (e.g. the client will not be happy without it, you cannot refresh the main page, etc.):

  • We want a pop-up that we can control (in terms of its size, location, turning off parts of the browser chrome, etc.).
  • We want the pop-up to work for people who don’t use JavaScript. The pop-up call should simply open a new browser window (or tab).
  • Regardless of the fact that we replicate browser tasks, we want a “close window” link in the pop-up.

These are common requirements we’ve all had to fulfill during our time as interaction designers. If we analyse them, we can conclude:

  • The control of the pop-up and the close link needs JavaScript.
  • The opening of a link in a new window can be achieved in markup via the target attribute (except for XHTML strict documents, but there is a workaround).

Now we need to make sure that, in our development, the appropriate tool does only what it needs to. Let’s start with the HTML markup.

<p>This will be our demo page that  
<a href="popkid.html" target="_blank">
shows a pop-up window(where possible)</a>
and simply <a href="popkid.html">links to the  
page without a pop-up.</a></p>

That’s all we require. We don’t need any inline event handlers like onclick or onkeypress — these are JavaScript, and should be added in the JavaScript code.

Use the Force of Cleaner JavaScript

Let’s start by defining the window attributes and the text content of the “close window” link. As this link can only work with JavaScript, we’ll add it via the DOM, later.

var closeElementId='closewindow'; 
var closeLinkText='Close window';
var windowAttributes='width=310,height=400,left=0,top=0,scrollbars=no,location=no';
Change the Pages that Spawn the Pop-ups

We need a JavaScript function to turn the HTML links on our pages into pop-up links. We can achieve this easily by looping through all links and checking which ones have a target attribute. This, however, should only happen on documents that are not contained within the pop-up; hence, we check whether there is an opener document.

if(!window.opener) 
{
 var as,i,popfun
 as=document.getElementsByTagName('a');
 for (i=0;i<as.length;i++)
 {
   if(as[i].target=='_blank')
   {
     popfun=function(){
       window.open(this.href,'',windowAttributes);
       return false;
     };
     as[i].onclick=popfun;
     as[i].onkeypress=popfun;
   }
 }

Looping through all <a> elements of the document, we check if they have a target attribute set to '_blank'. If they do, we apply the window.open function when the link is clicked, or when a key is pressed while the link is focused (accessibility, as we know, also means mouse-independence). Returning false ensures that the link does not get opened in the opener document – it’s opened only in the pop-up. We know which document to open in the pop-up by reading the href attribute of the link.

If we don’t want to loop all links (this may take some time), we can just loop through special parts of the page. Say, for example, that we defined a content part with <div id="content">. In this case, all we need to do is to find the following:

as=document.getElementsByTagName('a');

We’d replace it with:

as=document.getElementById('content').getElementsByTagName('a');

Adding Extras to the Documents Inside the Pop-up

That took care of the opener pages. Now, let’s look at the pop-ups, which do have a window.opener:

} else { 
 var closep,closelink,closetext;
 closelink=document.createElement('a');
 closetext=document.createTextNode(closeLinkText);
 closelink.href='#';
 closelink.appendChild(closetext);
 closelink.onclick=function(){self.close();};
 closelink.onkeypress=function(){self.close();};
 if(document.getElementById(closeElementId))
 {
   document.getElementById(closeElementId).appendChild(closelink);  
 } else {
   closep=document.createElement('p');
   closep.id=closeElementId;
   closep.appendChild(closelink);
   document.body.insertBefore(closep,document.body.firstChild);  
 }
}

First, we create a new link element, and apply the text defined earlier as the text content. Then, to make it appear as a link, we set the href of the link to "#". To make the link close the window, we apply the function self.close() to it. This is activated when the user clicks on the link, or when a key is pressed while the link has the focus.

Now, we get greedy: we want to enable the HTML developers to define where the link should appear.

If they don’t want to define the location, we simply apply the link in its own paragraph as the first element of the document. But, to make sure we can still apply CSS to it, we give it an ID.

This ID is the one we defined earlier as closeElementId. Now, if the HTML already contains an element that has this ID, we simply add our link as a new child to this element using appendChild(). If we don’t already have an element with that ID, we create a new paragraph element and apply the ID to it. We add the link to this new paragraph, and add the paragraph as a new first child element to the body of the document using insertBefore.

Call to Action!

That’s all we need to do. The only thing left is to wrap all the above in a function, call it when the page loads, and add the whole lot to a .js include that will be added to each of the documents involved.

The onload call can be achieved in various ways. One method involves attaching an event to the window; another is simply to add a window.onload=functionname; as the last line of the .js include.

Scott Andrew wrote a handy function that attaches an onload event to the window. The benefit of this is that it adds to other onload events, rather than overwriting them. One problem with it is that it doesn’t work in Internet Explorer on Mac computers.

Download the full script and the HTML demo pages here.

Other Applications

What else could we do with this solution? One nice feature would be to give users the choice to open the pop-ups with styling, or without, as they wished. We could implement this by applying to the opener pages a form containing a checkbox, and to apply the window attributes only when the box was checked.

This setting should be stored in a cookie or the back end, as it’s rather useless if the user has to redefine it on every page.

As we normally remove the browser toolbars from a pop-up, and we cannot assume that everybody knows the keyboard shortcut to print the page, we could also add a “print this page” link that would invoke the window.print() function.

Another idea might be to flag to the user that these specific links open in pop-ups by applying an icon to them, or changing their display. But, whatever we do, let’s make sure that we do it in JavaScript and keep the HTML unharmed.

What are pop-ups and how do they work?

Pop-ups are a type of window that appears on top of the webpage you’re viewing. They are often used for advertisements or to capture email addresses for newsletters. Pop-ups are created using JavaScript and can be designed to appear in various sizes and locations on the screen. They can be triggered by various actions such as clicking a link, hovering over a specific area, or after a certain amount of time has passed.

How can I create a pop-up link?

Creating a pop-up link involves using JavaScript to open a new window when a link is clicked. This can be done by adding an ‘onclick’ event to your link that calls a JavaScript function. This function will use the ‘window.open’ method to create a new window with specified dimensions and properties.

What are dead links and how do they affect my website?

Dead links, also known as broken links, are links that lead to a webpage that no longer exists or is unavailable. They can negatively impact your website’s user experience as they lead to frustration and confusion. They can also harm your website’s SEO as search engines consider the quality of links when ranking websites.

How can I identify and fix dead links on my website?

There are various tools available online that can crawl your website and identify any dead links. Once identified, you can either remove these links or update them to point to a relevant, existing page. Regularly checking for and fixing dead links can help improve your website’s user experience and SEO.

Can I use pop-ups to improve user engagement on my website?

Yes, when used correctly, pop-ups can be a powerful tool for increasing user engagement. They can be used to capture email addresses, promote special offers, or provide important information. However, it’s important to use them sparingly and ensure they are not intrusive or annoying to users.

How can I make my pop-ups more effective?

To make your pop-ups more effective, ensure they are relevant to the user and offer value. They should be visually appealing and easy to close if the user is not interested. It’s also important to test different designs, copy, and triggers to see what works best for your audience.

How can I use hyperlinks in pop-ups?

Hyperlinks can be used in pop-ups to direct users to another page or to trigger another action. This can be done by adding a link in the pop-up’s content and using JavaScript to define what happens when the link is clicked.

Can I open a pop-up with a URL?

Yes, you can use a URL to open a pop-up. This can be done by appending a specific parameter to the URL that triggers the pop-up when the page is loaded. This can be useful for directing users to specific content or actions.

How can I ensure my pop-ups are mobile-friendly?

To ensure your pop-ups are mobile-friendly, they should be responsive and adapt to different screen sizes. They should also be easy to close, as small close buttons can be difficult to click on mobile devices. It’s also important to consider the timing and frequency of your pop-ups on mobile devices.

Are there alternatives to pop-ups that I can use on my website?

Yes, there are several alternatives to pop-ups that can be used to engage users. These include slide-ins, notification bars, and inline forms. These can often be less intrusive than pop-ups and can be just as effective when used correctly.

Christian HeilmannChristian Heilmann
View Author

Chris Heilmann is a Senior Program Manager at Microsoft and literally wrote the handbook on developer evangelism. He spends a lot of time speaking at conferences, blogging and helping people understand and make others understand technology better. You can follow him on Twitter and read his blog.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week