How to Make an External Link Pop-up Modal

Anyone with a website normally wants to keep people on the page as long as they possibly can with as few distractions as possible. However, there are moments when it’s necessary for a user to exit your page and visit a third-party organization linked through your website. Sometimes it’s to fill out forms. Maybe it’s to see a special offering from a partnering business or group. But regardless of where your user will end up, it’s important to tell them they won’t be on your website once they click that link.

That's where modal pop-up windows come in handy. Modal windows simplify UI while also saving screen space and forcing your website users to be a bit more intentional with their actions. If they accidentally clicked on a third-party link, the modal pop-up window gives them a second chance to stop the action and go back to your website. And if they want to continue to a third-party link via your page, they can definitely make sure it’s what they want.

There are a number of benefits to using this type of attention-grabbing modal:

1.  It’s a courtesy to web users to let them know exactly when they’re leaving the site. It gives them the chance to prevent unintended behavior -- aka leaving your site.
2.  It lets you make it clear to your web users that you’re not responsible for the content on a third-party site they’re about to visit.
3.  It grabs the user’s attention and interrupts their task for more important information.
4.  The modals show additional content or opportunities -- both in context of your page’s content or out of context depending on your usage of the pop-up modal.

Depending on your organization, you might also encounter some regulatory requirements that dictate your prompting the user that they’re leaving your website. This is particularly relevant for government organizations and other groups in the public sector. For example, the City of Miami Beach required one for its website as it partnered with a number of third-party organization websites throughout the Miami Beach area. 

Once a user interacts with the popup modal, it’s important to give them a way out. Either give web visitors clear direction to continue onto the third-party site or give them very, very clear instructions on how to exit out of the modal. If you don’t give them clear paths to either option, you risk the worst happening: they leave your website entirely out of a moment of confusion or frustration.

This particular tutorial is largely nonintrusive, and it uses minimal code so it won’t weigh down a page.

HTML

With the HTML, all you have to do is include the "Notice" modal that will appear when some clicks on an external links. Your links do not need any special classes or customization as all of that will be handled by the JavaScript:

CSS

The CSS is used to primarily style the "Notice" modal. You can customize the notification to match the specific styles and branding of your individual site.

JavaScript

The most important component to this tutorial is the JavaScript/jQuery. With some versitile code, you can dynamically check each link to see if it is external and, if so, append some custom classes:

The first component of the above JS is to check each link to see if it is external or internal. This is possible by comparing the links "hostname" against the "hostname" of your domain. Any deviations will be marked as external and given the class "ext_link". The second part simply handles the modal toggling.

And with all of that, you will have a fully functional external link popup. While this will be triggered by external links, internal links themselves will be unchanged so that your users have a seemless experience. View a working demo below: