Wait, don’t go!

Here we add a warning when a user clicks on an external link so the client can inform the visitor that they are about to leave their site.

Andy Paddock
Updated on

Picture this: You’ve just redesigned a financial client’s website, and it’s looking pretty slick. But during the final testing phase, you realise there’s a crucial component missing: a system to inform site visitors when they’ve clicked on an external link.

Thankfully, you already have a modal box set up on the site. So you decide to repurpose it and add some fancy Javascript to make the magic happen.

Here’s the scoop: when the page loads, the script automatically checks each link. If it starts with “HTTP” but doesn’t contain the site’s URL, it’s flagged as an external link (aka “isExternal”).

Then, when a visitor clicks on one of these external links, the modal box pops up and applies an “active” class. The “Continue” button within the modal box is automatically linked to the external site. Plus, there’s some handy HTML copy to let the user know what’s going on.

And the best part? Once the user has clicked “Continue” and safely navigated to the external site (in a new window), we close the modal box Voila! Your client’s website is now even more user-friendly and conforms to the standards required.

Here’s the code, I’ve gone a bit overboard on the comments but it should be easy to follow what’s going on.

<script>
    const links = document.querySelectorAll('a');
    // Select all links on the page
    links.forEach(link => {
        const isExternal = link.href.startsWith('http') && !link.href.startsWith(window.location.origin);
        // Check if the link is external
        if (isExternal) {
            // If the link is external, add a click event listener to it
            link.addEventListener('click', e => {
                e.preventDefault();
                // Prevent the default behavior of the link
                const modal = document.querySelector('#speedbump');
                // Select the modal with ID "speedbump"
                const continueLink = modal.querySelector('.continue-link');
                // Select the link within the modal with class "continue-link"
                continueLink.setAttribute('href', link.href);
                continueLink.setAttribute('target', '_blank');
                // Set the href attribute of the continue link to the external link and set its target to "_blank" to open in a new window
                const closeButton = modal.querySelector('.close-button');
                // Select the close button within the modal with class "close-button"
                closeButton.addEventListener('click', e => {
                    e.preventDefault();
                    modal.classList.remove('active');
                    // Add an event listener to the close button to remove the "active" class from the modal when clicked
                });
                continueLink.addEventListener('click', e => {
                    modal.classList.remove('active');
                    // Add an event listener to the continue link to remove the "active" class from the modal when clicked
                });
                modal.classList.add('active');
                // Add the "active" class to the modal to display it on the page
            });
        }
    });
</script>

Codepen

Doing something that doesn’t end up working is better than Not doing something because of the fear it won’t work.

Aaron Levie, Box.net

Leave a Reply

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