---
title: "How to Open a Modal Popup on Button Click in WordPress?"
url: https://nexterwp.com/docs/open-a-modal-popup-on-button-click-in-wordpress/
date: 2024-11-28
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Open-a-Modal-Popup-on-Button-Click-in-WordPress_-1024x519.jpg
word_count: 323
---

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

## 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.

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](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-button/)

## 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

- Go to **Nexter > Patterns**, add a new pattern with your popup content and publish it.

- Add the **Advanced Button** block to your page, pick a style and type the button text.

- Open **Modal Popup** and turn on **Enable Popup on Click**.

![The Modal Popup panel with Enable Popup on Click turned on](https://nexterwp.com/wp-content/uploads/2026/09/advanced-button-popup.webp)

- Choose your pattern in **Select Template**. You can also click **Create Pattern** there.

- 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.

## 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

- [Advanced Button block: all settings](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/)- [Add a popup with the Popup Builder block](https://nexterwp.com/docs/add-popup-builder-in-wordpress/)- [Trigger a popup on page load](https://nexterwp.com/docs/trigger-popup-on-page-load-wordpress/)