Skip to content

How to Open a Modal Popup on Button Click in WordPress?

Updated On : September 28, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Nexter Blocks Advanced Button block opens a fancybox overlay on button click, and it uses the Modal popup tab to connect the button to saved WordPress Patterns.
  • WordPress Patterns store the popup content, including a contact form, a video embed, a promotional message, or custom block content, before the button is linked to it.
  • Enable Pop on Click turns the Advanced Button block into a modal trigger instead of a link URL, so the visitor stays on the current page.
  • FancyBox Options include Overlay Color and Width, letting the modal backdrop color and popup size be adjusted for forms, image galleries, short messages, or promotional offers.
Table of Contents

A popup keeps visitors on the page while showing a signup form, discount code or video.

The free Advanced Button block in Nexter Blocks opens any saved pattern in a popup when the button is clicked.

For every Advanced Button setting in one place, see the Advanced Button block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Advanced Button, switched on under Nexter > Blocks in your WordPress dashboard.
  • A pattern with the popup content: create it under Nexter > Patterns (the WordPress patterns list) and add a form, text, image or video.

Steps

  1. Go to Nexter > Patterns, add a new pattern with your popup content and publish it.
  1. Add the Advanced Button block to your page, pick a style and type the button text.
  1. Open Modal Popup and turn on Enable Popup on Click.
The Modal Popup panel with Enable Popup on Click turned on
  1. Choose your pattern in Select Template. You can also click Create Pattern there.
  1. On the Style tab, open FancyBox Option to set Overlay Color and Width. Save and click the button on the live page.

How It Behaves

  • Clicking the button opens the pattern in an overlay; the page does not change.
  • The Link field is ignored while the popup is on.
  • The pattern content is loaded with the page, hidden until the click.
  • It works the same in the free plugin and with Nexter Blocks Pro.
Front end after clicking a Nexter Blocks Button: the selected pattern opens in a FancyBox overlay with a close button

Limitations

  • One button opens one pattern. Use a separate button for each popup.
  • There are no display rules or timers. For popups on page load or exit intent, use the Popup Builder block.

Troubleshooting

The popup is empty

No pattern is selected, or the pattern is not published. Choose a published pattern in Select Template.

The button opens a link instead

Turn on Enable Popup on Click in the Modal Popup panel.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before I can open a modal popup on button click in WordPress?

The setup depends on two things: the Advanced Button block must be enabled under Nexter > Blocks, and the popup content must already exist as a published pattern under Nexter > Patterns. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the free Advanced Button block in Nexter Blocks, so the button is only the trigger. The actual popup content comes from the pattern you create first.

Can I use a form, image, text, or video inside this popup?

The popup can hold any saved pattern content, and the page explicitly mentions a signup form, discount code, text, image, or video. That makes the pattern the container for whatever you want to show in the overlay. In practice, this is useful when you want to keep visitors on the page while revealing extra content only after they click the button.

Why does my button open a link instead of a popup?

That usually means Enable Popup on Click is not turned on in the Modal Popup panel. When that option is active, the Link field is ignored and the click opens the selected pattern in an overlay instead of navigating away. This matters because the button still looks like a normal link/button in the editor, but its behavior changes only when popup mode is enabled.

Why is my modal popup empty when I click the button?

An empty popup usually means no pattern was selected or the pattern was not published. The button needs a published pattern chosen in Select Template before it can show anything. A good check is whether the content exists under Nexter > Patterns and is actually published, because unpublished content will not load into the overlay.

What are the limits of opening a modal popup with an Advanced Button block?

The main limit is that one button opens one pattern. If you need multiple popups, use separate buttons for each one. The page also says there are no display rules or timers in this setup. For page-load popups or exit-intent behavior, Nexter Blocks points you to the Popup Builder block instead.

What’s better for a click popup: Advanced Button or Popup Builder?

Advanced Button is the right choice when you want a simple click-triggered overlay tied to one saved pattern. Popup Builder is better when you need display rules or timers such as popups on page load or exit intent. That split matters because Advanced Button keeps things lightweight and direct, while Popup Builder handles timed or rule-based behavior that this tutorial does not cover.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53