---
title: "How to close WordPress Popup with the Esc button or by clicking outside?"
url: https://nexterwp.com/docs/close-popup-with-esc-or-clicking-outside/
date: 2023-02-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A popup that is hard to close is the fastest way to lose the visitor entirely. Two switches let people dismiss it the way they already expect: the Escape key,..."
image: https://nexterwp.com/wp-content/uploads/2024/05/close-popup-with-esc-or-clicking-outside-1024x519.jpg
word_count: 426
---

# How to close WordPress Popup with the Esc button or by clicking outside?

## Key Takeaways

- Nexter Blocks Popup Builder lets users close a popup with the Esc button by turning on Extra Options > Esc Button Close Content.
- Nexter Blocks Popup Builder lets users close a popup by clicking outside it through Extra Options > Outer Click Close Content.
- Nexter Blocks Popup Builder supports turning on both close options or only one, depending on requirements.

A popup that is hard to close is the fastest way to lose the visitor entirely.

Two switches let people dismiss it the way they already expect: the Escape key, or a click outside the box.

*For every Popup Builder setting in one place, see the [Popup Builder block guide](https://nexterwp.com/docs/add-popup-builder-in-wordpress/).*

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

## Before You Start

- **Edition:** **Pro** — the Popup Builder block is part of Nexter Blocks Pro.- **Block to enable:** Popup Builder, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The popup's content decided:** a short message, a form, or a saved pattern to load into it.

## Steps

- Add the **Popup Builder** block to your page and click **Design from Scratch**.

- In the **Content** panel, choose a **Type** and set the popup's size.

![The Content panel with the Type setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-type.webp)

- Set **Content Type** and add what the popup should show.

![The Content Type setting with Pattern, Content, Editor and Shortcode](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-content-type.webp)

- Open **Display Conditions** and switch **Esc Button Close Content** on.

![The Extra Options panel with Esc Button Close Content](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-esc-close.webp)

- In the same panel, check **Outer Click Close Content** so a click outside the popup closes it too.

![The Outer Click Close Content setting](https://nexterwp.com/wp-content/uploads/2026/09/popup-builder-outer-close.webp)

- Publish the page, open the popup and try both.

- Publish the page and test it on the front end.

> *A popup can have more than one display condition switched on at once. Leave **On Button Click** on only if you also want the button to open it.*

## How It Behaves

- Both are on by default, and both were verified: opening the popup and pressing **Esc** closes it, and opening it and clicking outside closes it.- They are independent, so you can keep one and switch off the other.- The popup's own close icon is separate again, in the Content settings.- Switching both off leaves the close icon as the only way out, so never remove all three.

## Limitations

- **Pro only.**- There is no Escape key on a phone, so on touch devices the outside click and the close icon are what visitors have.- A popup that fills the screen leaves nowhere outside to click, so keep the close icon on for those.- These settings are per block and apply to every way the popup opens.

## Troubleshooting

### Pressing Escape does nothing

Check **Esc Button Close Content** is on, and click once inside the page first so the keyboard is focused there.

### Clicking outside does not close it

Check **Outer Click Close Content** is on. If the popup covers the whole screen there is no outside to click.

### Visitors cannot close the popup at all

Switch the close icon back on in the Content settings, and leave at least one of these two on.

## Related Docs

- [Popup Builder block: all settings](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/)- [Create an off canvas side menu](https://nexterwp.com/docs/off-canvas-popup-menu-in-wordpress/)