Persuasive popups

Popups can help you elicit information from users, convince them to take an offer, or get them to explicitly agree to terms and conditions. If used well they can enhance the flow of using your site, and they can even increase conversions.

A popup is a box that is shown in front of your web page or store to engage with your user. These are used frequently on websites and are sometimes considered a bit of an annoyance. However with careful consideration about how and when you use a popup, they can help your customers and lead to more sales.

There reasons for showing popups this include:

Advertising a special offer.
Asking the visitor to accept terms and conditions.
Compliance with European laws such as GDPR or the Cookie Laws.
Telling the user to save their work.
Telling the user that they haven’t completely filled in a form.

There are different times you can show a popup. It could be:

When a user takes an action like clicking a button.
After a set period of time after first loading the page.
When the user tries to navigate away from an important page.

The thing to consider with popups is the trade-off between helping visitors, annoying visitors and helping increase your marketing and sales goals. This will take some thought on your part, and you should review what your site is like to use, get feedback from customers, and possibly use tracking tools like Google Analytics to see how people are using your site and where they fall out.

With this in mind, let me show you one of the simplest ways to make a popup on your website. This is to use JavaScript and CSS with no libraries, giving you full control how over your popup appears.

The first step is to add the following CSS style section within the <head> and </head> tags on your page. The CSS defines several classes. The popup-background class makes sure that the rest of your web page is made dark so that the popup is more obvious. The popup class sets the rectangle area which contains the content you want inside the popup. The close classes set the appearance of the X that you click to close the popup.

Add the following HTML to the page or pages you want to show a popup on, inside of the head open and close tags:

<style>
    .popup-background {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .popup {
        background-color: #fefefe;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        max-width: 512px;
        width: 80%;
    }

    .close {
        color: #bbb;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

Now we add the HTML that shows the popup content. Because the CSS we defined hides this by default, the popup will be hidden when the page is first loaded.

Add the following html just below the <body> opening tag on the page or pages:

<div id="popup-background" class="popup-background">
    <div class="popup">
        <span class="close">&times;</span>
        <h1>Special Offer</h1>
        <p>Save up to 50% off with coupon code SPEC2019</p>
        <button class="OK">OK</button>
    </div>
</div>

Step 3: Add the JavaScript

JavaScript code is needed so that the popup is shown at the right time, and also so that it can be closed with both the close button and by clicking outside of the popup area.

Add the following html just above the </body> closing tag on the page or pages:

<script type="text/javascript">
    var popup = document.getElementById('popup-background');
    var showButton = document.getElementById('showButton');
    var closeButton = document.getElementsByClassName('close')[0];
    var okButton = document.getElementsByClassName('OK')[0];

    showButton.onclick = function () {
        popup.style.display = "block";
    }

    closeButton.onclick = function () {
        popup.style.display = "none";
    }
    
    okButton.onclick = function () {
        popup.style.display = "none";
    }

    window.onclick = function (event) {
        if (event.target == popup) {
            popup.style.display = "none";
        }
    } 
</script>

We also need to add the show button somewhere in the page, within the body tags and before the script tag we just inserted:

<button id="showButton">Open Popup</button>

Another option is to show the popup after a certain amount of seconds. To do this convert the seconds into milliseconds by multiplying by 1000. E.g. 5 seconds is 5000 milliseconds. Then add HTML like this to cause the popup to show, replacing the 5000 with the number of milliseconds that you require:

<script type="text/javascript">
setTimeout(function() { 
    popup.style.display = "block";
}, 5000);
</script>

To learn more about setTimeout, please see my JavaScript setTimeout tutorial.

Conclusion

This was a quick guide on how to add a popup to your website, using JavaScript and CSS. If you want to learn more about JavaScript, take a look at Super JavaScript for free tutorials on many JavaScript topics.

Creating a Popup with JavaScript and CSS

Step 1: Adding the popup CSS

Step 2: Add the popup HTML

Step 3: Add the JavaScript

Conclusion