--- 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-04-17 author: "Aditya Sharma" description: "Do you want to show content in a modal popup when a visitor clicks a button on your WordPress page? A modal popup lets you display offers, forms, discount codes,..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Open-a-Modal-Popup-on-Button-Click-in-WordPress_-1024x519.jpg word_count: 611 --- # How to Open a Modal Popup on Button Click in WordPress? ## Key Takeaways - Nexter Blocks includes an Advanced Button block that features a built-in modal popup for displaying content on button click. - Users can create a pattern with desired popup content by navigating to Nexter Blocks u2192 Patterns u2192 Add Pattern. - The Advanced Button block allows users to connect different buttons to separate patterns for varied popup content. - Nexter Blocks enables customization of the modal popup's appearance, including overlay color and width adjustments. Do you want to show content in a modal popup when a visitor clicks a button on your WordPress page? A modal popup lets you display offers, forms, discount codes, or newsletter subscriptions in an overlay without navigating the visitor away from the current page. The Advanced Button block in [Nexter Blocks](https://nexterwp.com/nexter-blocks/) includes a built-in modal popup feature that opens a fancybox overlay on button click. You set the popup content using WordPress Patterns, then connect it to the button from the **Modal popup** tab in the block settings. *To check the complete feature overview documentation of Nexter Blocks Advanced Button block,* [click here](https://nexterwp.com/docs/add-advanced-buttons-in-wordpress/). **Best Used For:** - Landing pages where clicking a call-to-action button opens a lead capture form without redirecting visitors to a new page - WooCommerce product pages where a button click shows quick-view product details or a promotional offer in an overlay - Portfolio and agency sites where a “View Project” button opens a full project description, image gallery, or video ***Requirement – This block is a part of [Nexter Blocks](https://nexterwp.com/nexter-blocks/), make sure it is installed and activated to enjoy all its powers.*** [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-button/) To do this, first create a pattern with the popup content you want to display. Go to **Nexter Blocks → Patterns → Add Pattern** to create a pattern. Add the content you want to appear inside the modal: a contact form, a video embed, a promotional message, or any custom block content. Save the pattern before proceeding. Then add the Advanced Button block to the page and follow the steps: 1. From the **Select Style** section under the **Content** tab, choose a button style. Then add your button text in the title field. Use this to choose a style that draws attention to the action, a bold filled button works better than a ghost button when the goal is to get visitors to open the popup. 2. Click the **Modal popup** tab and enable the **Enable Pop on Click** toggle. This makes the button open a fancybox modal popup on click instead of navigating to a link URL. Use this on campaign pages where you want to capture attention with an overlay rather than take visitors to a separate page. 3. From the **Select Template** dropdown, choose the pattern you created. The dropdown lists all saved patterns from your WordPress site. Use this when you have different popup content for different buttons, since each Advanced Button block can connect to a separate pattern. > *Note: You can also create a pattern from here by clicking on the ****Create Pattern**** button.* If you need a more advanced popup with display conditions, scheduling, or page-specific targeting rules, see [How to Add a Popup in WordPress?](https://nexterwp.com/docs/add-popup-builder-in-wordpress/) which covers the dedicated Popup Builder block in Nexter Blocks with full popup control. When you click the button on the published page, the pattern content opens in a modal popup overlay. To adjust the popup appearance, go to the **Style** tab and scroll to **FancyBox Options**. **Overlay Color** – Controls the background color of the backdrop behind the modal popup. Use this when your site uses a specific brand color scheme and you want the overlay backdrop to match rather than default to the standard dark overlay. **Width** – Controls how wide the modal popup appears on screen. A wider value works well when displaying forms or image galleries inside the popup. A narrower value fits better for simple message overlays or short promotional offers. To show a popup when the page loads instead of on button click, see [How to Trigger a Popup on Page Load in WordPress?](https://nexterwp.com/docs/trigger-popup-on-page-load-wordpress/) which covers that workflow using the Popup Builder block in Nexter Blocks. ## Frequently Asked Questions **Q: What should I do if the modal popup doesn't appear when I click the button?** A: If the modal popup doesn't appear, first ensure that the Advanced Button block from Nexter Blocks is installed and activated. This block is essential for enabling the popup feature. Additionally, check that you've enabled the 'Enable Pop on Click' toggle in the Modal popup tab. If these settings are correct and the issue persists, consider clearing your browser cache or checking for JavaScript errors in your console. **Q: What is the best button style to use for a modal popup?** A: Choosing the right button style for your modal popup is crucial for visibility and user interaction. A bold, contrasting style can draw attention, while a subtle style may blend in too much. Experiment with different styles in the Select Style section under the Content tab of the Advanced Button block to find what works best for your site's design and user experience. **Q: What happens if I forget to create a pattern for the popup content?** A: If you forget to create a pattern for the popup content, the modal will not display any content when the button is clicked. It's essential to create a pattern first by navigating to Nexter Blocks > Patterns > Add Pattern. This step ensures that your modal has the intended content to show, enhancing the user experience. **Q: Does the modal popup feature work with other page builders besides Gutenberg?** A: The modal popup feature is built into the Advanced Button block of Nexter Blocks, which is designed primarily for Gutenberg. While it may function with other builders like Elementor or Bricks, the optimal experience and full functionality are achieved when using Gutenberg as the primary builder. **Q: Are there any limitations to using the modal popup feature?** A: One limitation to consider is that the modal popup feature is dependent on the Advanced Button block from Nexter Blocks. If this block is not installed or activated, the popup will not work. Additionally, ensure that your content is optimized for mobile devices, as popups can sometimes be less effective on smaller screens.