How to Build a Popup That Opens on a Button Click

Popups that appear on their own are easy to dismiss: across the popups we power, 71% of visitors who close a popup do so within 5 seconds of it appearing (Popupsmart popup benchmark 2026). If you want visitors to engage without feeling ambushed, let them open the popup themselves. In my experience, on-click popups strike a better balance, because visitors engage on their own terms. This guide covers three methods to create a popup triggered by a button click: the no-code way, a hand-coded HTML popup, and a teaser.

Quick Summary By Popupsmart

Low engagement or high bounce rates? This post shows three methods for on-click popups, the kind a visitor opens with a button. You'll set up Popupsmart's On-Click Targeting without writing a popup yourself, code an accessible HTML popup with the <dialog> element, or add a teaser, and you'll see what Popupsmart's 2026 benchmark says about the button words and form fields inside the popup.

Why Show Popup on Button Click

The Problem: Intrusive Popups Push Visitors Away

Traditional popups often show up at the wrong time and get in the way, and visitors leave. In Popupsmart's 2026 benchmark, 40.5% of popup displays end with the visitor closing the popup (all displays pooled, February 2025 - September 2026, since close tracking began). So how do you get someone's attention without annoying them?

The Agitation: Missed Opportunities and Poor Engagement

A popup that interrupts browsing breaks the visitor's flow, and you pay for it in bounces and lost conversions. The Zeigarnik Effect (an unfinished task pulls people to finish it) can't help you when the visitor never chose to start one.

And the decision comes fast: 71% of visitors who close a popup do so within 5 seconds of it appearing.

The Solution: On-Click Popups Empower Users

An on-click popup lets the visitor decide when to engage. They stay in control. Our benchmark has no separate cut for popups opened by a click, so we won't give you a conversion rate for them; what it does measure is how quickly an unwanted popup gets closed. Here’s why on-click popups are worth building:

• It's a two-step opt-in. The visitor first clicks a button with a clear call-to-action, and only then does the popup open.
• The Zeigarnik Effect works for you here. Clicking the button starts a task, and people tend to finish what they've started.
• The click signals intent: the visitor asked for the popup, so the form inside it is an answer, not an interruption.
• Visitors shape their own journey, which means less frustration.
• You can put the button where the intent already is, so the call-to-action fits the page around it.
• On-click popups work on desktop and mobile, and 63% of popup displays in our benchmark happen on mobile, so test the button and the popup on a phone first.

💡 Pro Tip: Place buttons where users are most likely to engage, like near high-traffic CTAs or product pages, to maximize clicks.

How to Build a Popup That Opens on a Button Click (3 Methods)

Every method below follows the same three steps: the popup waits hidden, a click runs one function, and the popup opens. What changes is who writes that function: Popupsmart, you, or a teaser that acts as the button.

1. How to Build a Popup Opens via Button with On-Click Targeting

We'll use Popupsmart to build the on-click popup form. It's the no-code way: you design the popup in the builder, and the only code you touch is one line on your button.

You can create on-click popup forms or show any popup with a button click on any website, such as a WordPress or Shopify popup form on-click. According to Popupsmart's help center, the on-click feature works anywhere on your website that supports JavaScript and HTML.

Popupsmart is a popup builder for building modern popups that bring in leads and sales.

It comes with ready popup designs and audience targeting, so you don't start from an empty page.

And yes, you can create a button and launch your Popupsmart campaign with one click on it. Here's how.

Step 1: Create a Popupsmart Account.

Go to the Popupsmart Register page. Popupsmart has a free plan at $0.

With your first name, last name, and email address, you are set to go.

To integrate your Popupsmart account with your website, you can use your Embed Code on the left sidebar.

Copy your embed code and paste it into the source code of your website.

For a clearer process, you can check How To Embed The Code On Your Site.

Or, there is a chance to set up your Popupsmart account with Google Tag Manager as well.

If this is your first popup campaign, the video at the top of this guide walks through the whole setup.

Step 2: Create a New Campaign.

After you view your dashboard, there is a button to create a new campaign, such as “+ New Campaign.” Click on it.

Name the campaign, pick your website and save.

Step 3: Choose a Popup Template.

When you move forward with your campaign, there are many different templates that you can choose from.

If you want to see templates beforehand, check Popupsmart Playbook now.

Otherwise, picking a template is the first thing you do inside the campaign.

Rather start from scratch? There are several blank popup templates too.

You can choose a blank template and fully customize it by yourself.

Step 4: Customize Your Popup Campaign.

With the 1st and 2nd steps, you can customize your popup body and style it as you like.

You can check Popupsmart elements to add.

That’s how you shape the campaign around the visitors you want to reach.

The customize step and the style step work together, but each one handles a different part of the popup.

Step 5: Add ‘On-Click Targeting’ on the Segment Step.

When you go to the Segment step, click “Edit Segment,” then “Add user behavior targeting” under “User Behavior,” and click “Add” next to “On-Click Targeting.” Check the “Enable” box to turn it on.

With “On-Click Targeting” on, a button click opens your popup. If you want the popup to open only on the click, also check “Disable all the other targetings”: every other targeting rule stops running and the button becomes the only way in.

Step 6: Add a Custom Code to Your Website.

One more thing turns the targeting on. Add this code to your website's source code:

<button onclick="window.ps.show({ id: xxxxxx });">Open It</button>

Replace the ID with your own, the one shown in your On-Click targeting.

Change the ‘Open It’ text to whatever your campaign needs. A discount popup and a newsletter popup shouldn't share the same button words.

The snippet goes on the click of a <button> or a <div>. Don't put it on an <a> tag that has an href: the link sends the visitor to another page, and the popup never shows.

<!-- Works -->
<button onclick="window.ps.show({ id: xxxxxx });">Get 10% off</button>
<div onclick="window.ps.show({ id: xxxxxx });">Get 10% off</div>

<!-- Doesn't work: the link leaves the page first -->
<a onclick="window.ps.show({ id: xxxxxx });" href="/about">About us</a>

If your theme or page builder doesn't let you edit a button's HTML, give the button a class (here open-offer) and attach the same call with a CSS selector from a script placed after the button. This is plain JavaScript around the documented call, not a separate Popupsmart setting:

<script>
  document.querySelectorAll(".open-offer").forEach(function (button) {
    button.addEventListener("click", function () {
      window.ps.show({ id: xxxxxx });
    });
  });
</script>

For the full details, read On-Click Targeting in the Popupsmart help center.

Step 7: Save and Publish Your Campaign.

Once the segmentation is set, save the campaign and move on.

On the Publish step, you check the campaign details one last time before it goes live.

That’s all. Click your button, and the popup opens.

2. How to Build a Popup Opens via Button with HTML

Our second method is creating a popup that opens via an HTML button.

Below are the steps, with popup opens via button HTML code examples you can adjust to your own needs and style. The example uses the HTML <dialog> element, which every current browser supports. Called with showModal(), it does the hard accessibility work for you: it puts the popup above the page, makes the rest of the page inert, moves keyboard focus inside and closes on Escape.

Step 1: Begin by setting up the basic HTML structure for your popup.

The HTML holds two things: the button that triggers the popup, and the popup itself, which we'll call a modal.

Create a <dialog> element with an ID to identify it as the popup container. Inside it, include the content you want to display in the popup, such as text, images, or forms.

<!-- Trigger/Open The Popup -->
<button type="button" id="open-popup" aria-haspopup="dialog">Get 10% off</button>

<!-- The Popup -->
<dialog id="signup-popup" aria-labelledby="signup-popup-title">
  <div class="popup-body">
    <form method="dialog">
      <button class="popup-close" aria-label="Close">&times;</button>
    </form>
    <h2 id="signup-popup-title">Your code is one step away</h2>
    <p>Enter your email and we'll send it now.</p>
    <form action="/subscribe" method="post">
      <label for="popup-email">Email address</label>
      <input id="popup-email" name="email" type="email" autocomplete="email" required autofocus>
      <button type="submit">Send my code</button>
    </form>
  </div>
</dialog>

A button inside <form method="dialog"> closes the popup with no JavaScript. autofocus sends keyboard focus to the email field when the popup opens, and aria-labelledby gives screen readers the popup's name.

Step 2: Then, add some CSS to style the modal. This CSS centers the popup, dims the page behind it and adds a short entrance animation.

Style the popup to make it visually appealing and match your website's design.

Use CSS to set the popup's position, size, colors, and typography. An animation or a transition is optional. The browser already hides a closed <dialog>, so you don't need display: none.

Your CSS can look like this:

/* The popup box (the browser centers a modal dialog) */
#signup-popup {
  width: min(90vw, 420px);
  padding: 0;
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
/* The dimmed page behind it */
#signup-popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.popup-body {
  position: relative;
  padding: 32px;
}
/* The Close Button */
.popup-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
/* Stop the page scrolling behind the open popup */
body:has(dialog[open]) {
  overflow: hidden;
}
/* Add Animation, only for visitors who haven't asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  #signup-popup[open] {
    animation: popup-in 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

Step 3: Finally, use JavaScript so the button opens the popup when someone clicks it.

Create an event listener for the button click event, and use it to open the popup with showModal().

You can use JavaScript to open the popup when the button is clicked and to close it when the user clicks outside the popup with a code like this. Escape and the × button already work without it:

// Get the popup and the button that opens it
const popup = document.getElementById("signup-popup");
const openButton = document.getElementById("open-popup");

// When the user clicks the button, open the popup
openButton.addEventListener("click", function () {
  popup.showModal(); // focus moves inside; Escape closes it
});

// When the user clicks the dimmed area outside the popup, close it
popup.addEventListener("click", function (event) {
  if (event.target === popup) {
    popup.close();
  }
});

// When the popup closes, return focus to the button that opened it
popup.addEventListener("close", function () {
  openButton.focus();
});

The outside-click check works because .popup-body fills the whole box: a click inside the popup lands on the body or its content, and only a click on the backdrop reports the <dialog> itself as its target. Current browsers already return focus to the opening button on close; the last listener makes that explicit for older ones.

The result is a popup you can style and animate however you like. HTML gives it structure, CSS handles the look and the motion, and JavaScript opens and closes it.

From here, add whatever content and styling your own popup needs.

Put together, your popup builder open via button HTML code looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Popup on Button Click Example</title>
  <style>
    #signup-popup {
      width: min(90vw, 420px);
      padding: 0;
      border: none;
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    }
    #signup-popup::backdrop {
      background: rgba(0, 0, 0, 0.5);
    }
    .popup-body {
      position: relative;
      padding: 32px;
    }
    .popup-close {
      position: absolute;
      top: 8px;
      right: 12px;
      border: none;
      background: none;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }
    body:has(dialog[open]) {
      overflow: hidden;
    }
    @media (prefers-reduced-motion: no-preference) {
      #signup-popup[open] {
        animation: popup-in 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      }
    }
    @keyframes popup-in {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
  </style>
</head>
<body>
  <!-- Trigger/Open The Popup -->
  <button type="button" id="open-popup" aria-haspopup="dialog">Get 10% off</button>

  <!-- The Popup -->
  <dialog id="signup-popup" aria-labelledby="signup-popup-title">
    <div class="popup-body">
      <form method="dialog">
        <button class="popup-close" aria-label="Close">&times;</button>
      </form>
      <h2 id="signup-popup-title">Your code is one step away</h2>
      <p>Enter your email and we'll send it now.</p>
      <form action="/subscribe" method="post">
        <label for="popup-email">Email address</label>
        <input id="popup-email" name="email" type="email" autocomplete="email" required autofocus>
        <button type="submit">Send my code</button>
      </form>
    </div>
  </dialog>

  <script>
    const popup = document.getElementById("signup-popup");
    const openButton = document.getElementById("open-popup");

    openButton.addEventListener("click", function () {
      popup.showModal();
    });

    popup.addEventListener("click", function (event) {
      if (event.target === popup) {
        popup.close();
      }
    });

    popup.addEventListener("close", function () {
      openButton.focus();
    });
  </script>
</body>
</html>

Change /subscribe to the address your form posts to, or connect the form to your email tool. On WordPress, you can paste this into a Custom HTML block; our guide on creating a popup in WordPress without a plugin covers where each part goes.

<style>
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        animation-name: animatetop;
        animation-duration: 0.4s;
    }
    /* Add Animation */
    @keyframes animatetop {
        from {top: -300px; opacity: 0}
        to {top: 0; opacity: 1}
    }
    /* The Close Button */
    .close {
        color: #333;
        float: right;
        font-size: 28px;
        font-weight: bold;
        background: none;
        border: none;
    }
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<!-- Trigger/Open The Modal -->
<button type="button" id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content" role="dialog" aria-modal="true" aria-label="Example popup">
    <button type="button" class="close" aria-label="Close">×</button>
    <p>Some text in the Modal..</p>
  </div>
</div>
<script>
    // Get the modal
    var modal = document.getElementById("myModal");
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    // Get the button that closes the modal
    var closeBtn = document.getElementsByClassName("close")[0];
    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
        closeBtn.focus();
    }
    function closeModal() {
        modal.style.display = "none";
        btn.focus();
    }
    // When the user clicks on (x), close the modal
    closeBtn.onclick = closeModal;
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            closeModal();
        }
    }
    // When the user presses Escape, close it
    document.addEventListener("keydown", function(event) {
        if (event.key === "Escape" && modal.style.display === "block") {
            closeModal();
        }
    });
</script>

3. How to Build a Popup That Opens on a Button Click with a Teaser

A teaser is a mini popup that comes before or after the main popup.

It's a friendly nudge, and it usually stays on the page whether the main popup is open or not.

Teasers work well when you announce a new event, want to catch a visitor's eye, or point people to a help center when they need help.

Because a teaser is small, it can act as the button that opens a popup. That gets you a popup that opens with a button click, with no code on your page at all.

To create a teaser, follow the Popupsmart campaign steps from the first method.

Then, go to the “Teaser” step in the popup builder and click the “eye” icon to show it. The “Edit teaser” area opens, where you pick its position, layout and when it appears.

Once the teaser is set to show, customize it the way you would the popup. The help center's guide to teaser popups lists the elements a teaser can hold. Popupsmart counts a teaser as a popup view, and the campaign's targeting applies to the teaser too.

Use Cases of a Popup That Opens on a Button Click

• Lead generation is the obvious one. A simple form asks visitors to subscribe to newsletters, updates or exclusive offers. Put a free resource or a discount on the button to get more sign-ups and grow your email list for future marketing.
• Promotional offers get people to act now. The button names the limited-time promotion, and the popup it opens carries the visuals and the copy that close the purchase.
• Content engagement works the same way: the button guides visitors to relevant blog posts, articles or downloadable resources, based on their interests or browsing behavior. Targeted messages and personalized recommendations keep them reading your site's content.
• Event announcements for webinars, workshops or live events can get more people to attend when a button click opens them. Give the event details, the registration link and the highlights, so visitors RSVP or learn more about the event.
• Collect feedback from your audience by inviting them to surveys, polls or feedback forms. Ask about products, services or website usability, and offer an incentive such as a discount or an entry into a prize draw to get more answers.

Here is what the promotional-offer case looks like on a product page: the visitor clicks "Get 10% off" and a short form opens over the page.

A button-opened popup is one format among many; our guide to the types of popups compares it with full-screen, slide-in and floating-bar formats.

Best Practices for Optimizing On-Click Popups

Design for Clarity and Appeal

• Use Bold CTAs: Our call-to-action examples show the wording side; the numbers come from Popupsmart's 2026 benchmark: first-person buttons ("Send my code") convert 1.18% vs 0.80% for neutral wording (English popups, median campaign). Buttons that promise value ("Get", "Claim", "Unlock") look stronger than "Subscribe" / "Join" buttons (1.06% vs 0.77%, English popups, median campaign), but the gap is not statistically reliable.
• Keep It Simple: Avoid cluttered designs. A clean popup with one clear goal (e.g., email capture) and a short form works best: popups asking for one or two fields convert 0.88% and 0.94%, against 0.56% for three fields (median campaign; spin-to-win and other gamified popups are counted separately).

Optimize for Mobile

• Responsive Design: Ensure your popup scales properly on mobile: 63% of popup displays happen on mobile, and mobile visitors convert on popups at 1.02% vs 0.57% on desktop (median campaign). The width: min(90vw, 420px) line in the code above keeps the box inside a phone screen.
• Fast Load Times: Compress images and minimize code to reduce load times. An on-click popup doesn't need to exist before the click, so keep heavy images out of it.

Test and Analyze Performance

• A/B Testing: Test different button text, offers and popup designs, one change at a time. Button colour, dark vs light popup backgrounds, urgency words and question headlines show no measurable effect on conversion in our benchmark; the data are too noisy to rule out modest effects. Our guide to A/B testing popups covers how long to run a test.
• Track Metrics: Use Popupsmart’s analytics to monitor click-through and conversion rates. For more on tracking, see Popupsmart Analytics help documentations.

Common Mistakes to Avoid

Overloading the Popup

• Too Much Content: Don’t cram forms, images, and text into one popup. Focus on a single action to avoid overwhelming users. Our popup UX design guide shows what a focused popup looks like.
• Poor Timing: Even on-click popups can annoy if the button is overused. Limit triggers to high-intent areas like checkout pages.
• Using a Link as the Trigger: A link with an href leaves the page before the popup opens. Use a <button>.

Ignoring Accessibility

• Keyboard Navigation: Ensure popups are accessible via keyboard for users with disabilities. The popup should take focus when it opens, close on Escape and hand focus back to the button when it closes; the <dialog> example above does all three.
• Color Contrast: Use high-contrast colors for readability, adhering to WCAG guidelines.
• A Close Button Without a Name: A lone "×" is read out as "times" by some screen readers. Give it aria-label="Close".

Conclusion

That's three ways to open a popup with a button click.

Pick the one that fits your site: Popupsmart's On-Click Targeting and one line on your button, an accessible <dialog> of your own, or a teaser.

Whichever you choose, give the button words people want to click, and keep the form to one or two fields.

Frequently Asked Questions

How do I open a popup on a button click with HTML?

Put the popup in a <dialog> element and call its showModal() method from the button's click event. showModal() puts the popup above the page, moves keyboard focus inside it and closes it when the visitor presses Escape. Add a close button inside a <form method="dialog"> so it closes without extra JavaScript.

Can I open a Popupsmart popup from a link?

Not from a link that goes to another page. Popupsmart's help center says to put window.ps.show({ id: xxxxxx }); on the click of a button or a div, and not on an <a> tag with an href, because the page change stops the popup from showing.

Is Popupsmart Compatible with CMS to Display Popup Campaigns?

Yes, it is. When you decide to create and publish your popup, all you need to do is customize your campaign and make sure that your embed code is working properly on your website.

How Can I Keep Popups from Interrupting Visitors?

Focusing on the timing and relevance of your popups is essential. Utilize the features to allow users to initiate interactions when they are ready, reducing the likelihood of interrupting their browsing experience. A popup that opens on a button click only appears after the visitor asks for it.

Can I Track the Performance of My Popups?

Yes, Popupsmart provides Leads and Analytics pages, where you can monitor metrics such as conversion rates, click-through rates, and engagement data to assess the effectiveness of your popups and make data-driven improvements.

Recommended Blog Posts

Want your popups to convert better? These are worth reading next:

• How to Create Converting Mobile Popups (Without Lowering Your SEO)
• Email Popup: Complete Guide with 15 Brilliant Examples
• Popup Video: How To Add One To Your Website (No Coding)
• How to Add MailChimp Popup to WordPress with Practical Steps