How to Make a Popup Window Open (Code & No-Code Methods)

know that most people think of popups as windows that appear automatically. But sometimes, you need something more subtle—a popup that only opens when a visitor clicks a specific button or link. This gives your audience control and feels much more integrated into your page.

This guide will walk you through exactly how to set that up. We’ll create a popup that waits for a user’s click, making it perfect for things like "Sign Up," "Get Discount," or "Learn More" buttons.

Step 1: Choose a Template and Design Your Popup

First, log into your Poper account and click the ‘New Popup’ button. You’ll see a library of templates. I always recommend starting with a template because it gives you a solid foundation and saves a lot of time.

For example, if you want to capture emails, our ‘Lead Magnet’ templates are a great starting point.

Once you pick a template, our editor will open. Here, you can change everything—the text, fonts, colors, and images—to match your brand perfectly. My one piece of advice here is to keep it simple. A clear headline and a single call-to-action button work best.

Step 2: Set the Popup to Open on a Button Click

After you’re happy with the design, click ‘Next’ to go to the ‘Display Conditions’ page. This is where the magic happens. Instead of choosing a time-based or exit-intent trigger, you’ll want to find the section for ‘Triggers’ and select the ‘On Click’ option.

This setting tells Poper not to show the popup automatically. It will only appear when a visitor clicks on a specific HTML element you define, like a button. This is the key to creating that "in-page" window experience you're looking for.

Step 3: Connect Your Marketing Tools

Next up is the ‘Integrations’ tab. This step is optional but incredibly useful for automating your work. If you’re collecting emails, you can connect Poper directly to services like Mailchimp, Klaviyo, or Omnisend.

Setting this up means any leads you collect are sent straight to your email list without you having to lift a finger. It just takes a moment to connect your account and helps keep your marketing flowing smoothly.

Step 4: Save and Publish Your Campaign

Once your trigger and integrations are set, just hit the ‘Save & Publish’ button. This makes your campaign live and ready to be installed on your website. You’re almost done!

Adding the Poper Code to Your Website

Now that your popup is ready, we need to connect Poper to your website. The great thing is you only have to do this once. After this one-time setup, you can create, edit, and manage all your popups from your Poper dashboard without ever touching your site’s code again.

Step 5: Copy Your Unique Workspace Code

In your Poper dashboard, look for the ‘Code’ section in the left navigation menu. Click on it, and you’ll see a small block of code. This is your unique snippet for your entire workspace.

This single piece of code powers every popup, banner, or widget you create for this domain. Just click the button to copy it to your clipboard.

Step 6: Paste the Code into Your Website’s Head Section

Now, open the HTML code of your website. You’re looking for the closing </head> tag. Paste the Poper code snippet you just copied right before that tag.

If your site uses a shared file like a header.php or a global header component, you can just add it there. Otherwise, you’ll need to add it to each page where you want Poper to work. Placing it in the head ensures our platform loads quickly and reliably for every visitor.

Step 7: Test Your New Click-to-Open Popup

Finally, save your website’s code and upload the changes. Now for the fun part! Go to your website, navigate to the page with your button, and give it a click. Your beautifully designed popup should appear right on cue.

And that’s it! You’ve successfully created a popup that respects your visitors' actions and engages them when they are most interested.

Method 2: The Modern Modal Popup (HTML, CSS, & JavaScript)

This is the method most people want. It creates a stylish, on-page overlay that is user-friendly and not blocked by browsers.

Step 1: Create the HTML for the Button and the Modal
Define your trigger button and the modal container, which will be hidden by default.

<!-- The Trigger Button -->
<button id="openModalBtn">Open Modal Popup</button>

<!-- The Modal Container (Initially Hidden) -->
<div id="myModal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <h3>My Modern Popup Window</h3>
        <p>This is a modal popup that opens on the same page.</p>
        <button class="close-modal-btn">&times;</button>
    </div>
</div>

Step 2: Style the Modal with CSS
Use CSS to create the overlay effect and style the modal content box.

.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    position: relative;
    max-width: 500px;
    width: 90%;
}
.close-modal-btn {
    position: absolute;
    top: 10px; right: 15px;
    background: transparent; border: none;
    font-size: 28px; cursor: pointer;
}

Step 3: Write JavaScript to Open and Close the Modal
This script listens for clicks to toggle the modal's visibility.

document.addEventListener('DOMContentLoaded', function() {
    const openBtn = document.getElementById('openModalBtn');
    const modal = document.getElementById('myModal');
    const closeBtn = modal.querySelector('.close-modal-btn');

    // Function to open the modal
    const openModal = function() {
        modal.style.display = 'flex';
    };

    // Function to close the modal
    const closeModal = function() {
        modal.style.display = 'none';
    };

    // Event Listeners
    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);

    // Optional: Close when clicking the overlay
    modal.addEventListener('click', function(event) {
        if (event.target === this) {
            closeModal();
        }
    });
});

Best Practices for Click-to-Open Popups

Conclusion

The ability to make a popup window open is a core part of modern web design and marketing. While the classic window.open() has its place, the modern modal popup provides a far superior user experience.

By triggering popups based on a user's click, you respect their browsing flow and engage them at the moment of highest intent, leading to better results and a more positive experience for your audience.

Frequently Asked Questions (FAQ)

• What's the main difference between a modal popup and a new browser window popup?

  A new browser window (window.open()) is a separate window from your main website, often blocked by browsers. A modal popup is an overlay that appears on top of the current webpage, keeping the user in the same browser window and context.

• How do I find the CSS selector for my button?

  The easiest way is to use your browser's "Inspect" tool. Right-click on the button, choose "Inspect," and the developer console will open with the button's HTML highlighted. Look for an id or class attribute on that highlighted element.

• Can I open a popup from a text link instead of a button?

  Yes. Any HTML element can be a trigger. You would just need to give that text link (<a> tag) a unique ID or class and use that as the target for your JavaScript or popup tool.

• Are on-click popups bad for SEO?

  No, on-click popups are generally considered very SEO-friendly. Because the user initiates the action, they are not seen as "intrusive interstitials" by search engines like Google.

• How can I put a video or a form inside my on-click popup?

  In your popup's HTML (whether coded manually or in a tool like Poper), you can place any content you want, including a video embed code (<iframe> from YouTube/Vimeo) or a form element.