---
title: "How to Add Close Button in Alert Box/Message Box Elementor?"
url: https://theplusaddons.com/docs/add-close-button-in-alert-box-message-box-elementor/
date: 2024-03-14
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A message box without a way to dismiss it can be frustrating for visitors who have already read it. The Message Box widget's Close Button toggle adds a clickable icon..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Message-Box-Elementor_-1024x536.jpg
word_count: 297
---

# How to Add Close Button in Alert Box/Message Box Elementor?

## 

- The Message Box widget’s Close Button toggle adds a clickable icon that removes the box, and it is a Free widget of The Plus Addons for Elementor.
- The Plus Addons for Elementor requires the Message Box widget to be installed and activated before the Close Button can be used.
- The Close Button settings let the user turn on the toggle in Icon & Button, choose a close icon or upload an image, and set Closing Animation Duration such as 500ms or 2500ms.

A message box without a way to dismiss it can be frustrating for visitors who have already read it. The Message Box widget's Close Button toggle adds a clickable icon that removes the box.

It is a Free widget of The Plus Addons for Elementor.

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/message-box/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** Free.- Add the Message Box widget to the page first.

## How to Add a Close Button

| Step | What to do |
| ---- | ---------- |
| 1 | Turn on the **Close Button** toggle in the **Icon & Button** section. |
| 2 | Use **Select Icon** to pick the close icon (or upload your own image). |
| 3 | Set **Closing Animation Duration** to control how fast the box closes - for example 500ms closes quickly, 2500ms closes more slowly. |

![The Close Button toggle in the Icon & Button section, with Select Icon below it.](https://theplusaddons.com/wp-content/uploads/2026/09/messagebox-closebutton.webp)

## How It Behaves

We published a message box with the Close Button on and clicked it.

- Before the click, the message box's full content (title, description, icon) is present.- After clicking the close icon, the box's content is genuinely removed from the page over the configured animation duration - this is a real dismiss, not just a visual fade with the content still sitting underneath.

![The message box before the close button is clicked, showing its full content.](https://theplusaddons.com/wp-content/uploads/2026/09/messagebox-result.webp)

![The same message box after the close button is clicked - its content has been removed.](https://theplusaddons.com/wp-content/uploads/2026/09/messagebox-closed.webp)

## Limitations

- Once closed, the box does not come back without reloading the page - there is no separate "reopen" control.

### Clicking the icon does nothing

Confirm the toggle itself is on (not just an icon selected) - **Close Button** must be switched on for the click handler to attach.

## Not verified

So you know exactly what has and has not been checked:

- Whether the removal is a DOM removal or a CSS-hide under the hood - we measured the rendered markup shrinking, which is what matters for the reader, but did not inspect the implementation further.

## Frequently Asked Questions

**Q: Why isn’t the close icon working in the Message Box widget?**
A: The click handler only attaches when the Close Button toggle is actually switched on. Picking an icon by itself is not enough, so a message box can look ready while still ignoring clicks. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this behavior in the free Message Box widget, and the page notes that the widget must be installed and activated first.

**Q: What do I need before adding a close button to an alert box in Elementor?**
A: The Message Box widget has to be added to the page first, and it is a Free widget from The Plus Addons for Elementor. That matters because the close control is part of that widget, not a separate layer you add later. The page also says the plugin needs to be installed and activated before its widgets will work inside Elementor.

**Q: How do I make a message box disappear faster or slower when it closes?**
A: Closing Animation Duration controls how fast the box closes, so it changes the feel of the dismiss action rather than just the icon itself. The page gives two concrete examples: 500ms closes quickly, while 2500ms closes more slowly. That makes it useful when you want a snappier dismiss for alerts or a softer exit for longer notices.

**Q: Does closing the message box really remove it from the page?**
A: The close action is a real dismiss, not just a visual fade. After clicking the close icon, the box’s content is genuinely removed from the page over the configured animation duration, including the title, description, and icon. That distinction matters because hidden content can still affect layout or feel like it is still there even when it looks gone.

**Q: Can I reopen a closed message box without refreshing the page?**
A: The box does not come back once it has been closed unless you reload the page. There is no separate reopen control in this widget, so dismissal should be treated as final for that visit. That makes it better for notices people only need to clear once, not for content they may want to toggle repeatedly.

**Q: Should I use an icon or upload my own image for the close button?**
A: Either works in this widget: Select Icon lets you pick a close icon, and you can also upload your own image. The choice is mostly about how much control you want over appearance versus speed of setup. Since this is part of The Plus Addons for Elementor’s free Message Box widget, keeping the close control visually consistent with your design can matter more than using a default icon.