How to make a popup in HTML? Different methods

General
1

Hey everyone! I’m trying to add a popup to my website to capture emails and promote discounts. I’d prefer a straightforward way to do it with HTML. So, how to make a popup in html? Can anyone share some methods?

2

Hi Amari! A quick way to make a popup using HTML is to combine HTML, CSS, and JavaScript. You create a basic structure in HTML with a div for the popup, style it with CSS, and then add JavaScript to control when it shows up. Here’s a simple step-by-step approach:

  • HTML: Create a container for the popup and add elements like text, an input field, and a close button.
  • CSS: Style the popup to center it and make it look like a modal, using position: fixed for full-screen coverage.
  • JavaScript: Add interactivity with functions to open and close the popup, triggered by events like button clicks.

Here’s a basic example:

<div class="popup-overlay" id="popupOverlay">
    <div class="popup" id="popup">
        <span class="close" id="closePopup">&times;</span>
        <p>Sign up for exclusive deals!</p>
        <input type="email" placeholder="Your email">
        <button>Submit</button>
    </div>
</div>

And add JavaScript to toggle the visibility based on user actions:

document.getElementById("popupOverlay").style.display = "block";
document.getElementById("closePopup").onclick = function() {
    document.getElementById("popupOverlay").style.display = "none";
};

This method is flexible and can be easily customized.

3

You can go with the basic popup Ece shared, and if you want to make it a bit more engaging, here are some things I’ve tried myself that work pretty well:

1. Delay the Popup a Bit: Instead of showing it right away, give users a few seconds to settle in. Just add a timer like this:

setTimeout(function() {
    document.getElementById("popupOverlay").style.display = "block";
}, 5000); // Shows popup after 5 seconds

2. Add an Overlay Background: Makes the popup stand out more! Just a bit of transparency over the page can really draw attention. Here’s how:

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Slightly transparent */
    display: none; /* Hidden by default */
}

3. Smooth Fade-in Animation: A quick fade-in can make the popup feel less sudden and more polished:

.popup {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

4. Let Users Close by Clicking Outside: This one’s super handy! Users can click anywhere outside the popup to close it:

window.onclick = function(event) {
    if (event.target == document.getElementById("popupOverlay")) {
        document.getElementById("popupOverlay").style.display = "none";
    }
};

5. Show Popup Only Once per Session: Don’t want to spam users? Use sessionStorage to show it just once per session:

if (!sessionStorage.getItem("popupShown")) {
    document.getElementById("popupOverlay").style.display = "block";
    sessionStorage.setItem("popupShown", "true");
}

Try these out to make your popup friendlier and keep it from being too in-your-face. :smile:

4

Hey Amari! I know you were asking about making a popup with HTML, but if you want a quicker, no-code option, you should give Popupsmart a shot.

You can create a fully customized popup without coding, and the free plan gives you some solid options to start with.

With Popupsmart, you can create popups that collect emails, announce discounts, reduce cart abandonment, and more, all designed to look great on any device. Here’s a detailed breakdown to help you get started:

  1. Sign Up and Start the Onboarding

First, go to Popupsmart’s website and create a free account.

  1. Embed the Popupsmart Code on Your Website

You’ll need to add a bit of code to your site to activate Popupsmart popups. You have two options:

  • Direct Embed: Popupsmart provides an embed code, just copy it and paste it right before the closing tag on your website. (If you’re using a website builder, look for an option to add custom code to your site’s footer).

Popupsmart embed code
Popupsmart embed code1280×1067 127 KB

  • Google Tag Manager (GTM): If you’re familiar with GTM, you can add the embed code there by creating a new tag as “Custom HTML,” pasting the code, setting the trigger to “All Page Views,” and publishing it.

Popupsmart GTM code
Popupsmart GTM code1280×1280 227 KB

  1. Create a New Campaign

In the Popupsmart dashboard, go to the “Campaigns” section and hit “+ New Campaign.” Give your campaign a name (e.g., “Newsletter Signup” or “Holiday Sale”) and select the domain you want to display it on.

Creating popup campaign
Creating popup campaign1280×1280 148 KB

  1. Pick a Template
    Popupsmart’s free plan gives you access to a variety of templates designed for specific goals, like:

Selecting business goal
Selecting business goal1180×1280 112 KB

  • Grow Your Email List: Use a popup that encourages visitors to subscribe to your newsletter, often with a discount offer.
  • Show a Discount Announcement: Perfect for promoting sales or special deals.
  • Reduce Cart Abandonment: A popup that appears before users leave, reminding them of items in their cart.

Just pick a template that fits your goal, and you’re ready to customize!

  1. Customize Your Popup

Here’s where you make it your own! In the builder, you can adjust:

  • Colors, Fonts, and Text: Match the popup to your website’s design for a cohesive look.
  • Images and Icons: Add your logo or any other image to make it stand out.
  • Form Fields: If you’re collecting emails, you can easily add an input field for users to type in their email addresses.

Customization step of the popup campaign
Customization step of the popup campaign1280×807 147 KB

For the free plan, you can customize essential design elements and text, so it feels like a natural part of your site.

  1. Set Up Targeting Options

One of the best things about Popupsmart is the targeting. With the free plan, you can still get pretty specific:

  • Display on Certain Pages: Choose to show the popup only on specific pages (like a product page or checkout page).
  • Exit-Intent Trigger: Show the popup when a user’s mouse moves toward the top of the screen to leave the page.
  • Visitor Type: Choose to show the popup to new visitors or only to returning ones.

Selecting Popupsmart targeting options
Selecting Popupsmart targeting options1280×1150 105 KB

  1. These options allow you to reach the right people at the right time, which can be a game-changer!
  2. Publish and Monitor Your Campaign

Once everything looks good, go to the “Publish” step to make it live. Popupsmart has an analytics dashboard, even on the free plan, where you can track your popup’s performance. You’ll see how many people viewed it, clicked on it, and converted.

With Popupsmart, you get a lot of flexibility, even on the free tier. You’ll be able to create eye-catching, functional popups in minutes and make them feel like a natural extension of your website.

Give it a try—it might save you tons of time and effort! Let me know if you go for it and how it works out! :blush:

1 Like