Skip to main content

How to Change the Title of an Alert Box in JavaScript

A frequent question from developers is how to change the title of the browser's native alert() box. The short and direct answer is: you can't. The native alert dialog is a simple, synchronous browser feature whose appearance and title are controlled by the browser itself (e.g., "The page at ... says:") and cannot be styled or changed with JavaScript.

This guide will explain this limitation and show you the standard, modern solution: using a lightweight library to create custom, stylable modal dialogs that can replace the native alert().

The Core Problem: Native alert() is Not Customizable​

The native alert(), confirm(), and prompt() dialogs are simple, blocking functions that are part of the browser's UI, not the web page's DOM. For security and consistency reasons, you have no control over their:

  • Title: It is always set by the browser and usually includes the origin of the page.
  • Styling: You cannot change the colors, fonts, or layout.
  • Buttons: You are limited to the default "OK" or "OK/Cancel" buttons.

For example, we want to create a custom dialog, but alert() is not customizable!

// Problem: This will always have a browser-defined title.
// There is no way to change "The page at ... says:".
alert('This is the message.');

To create a dialog with a custom title, you must use a custom solution built with HTML, CSS, and JavaScript.

The Modern Solution: Using a Modal Library (like SweetAlert2)​

The best practice is to use a well-maintained library to create beautiful, accessible, and highly customizable modal dialogs. These libraries create dialogs using DOM elements that you can control. One of the most popular and easy-to-use libraries is SweetAlert2.

It allows you to create alerts with custom titles, text, icons, and buttons with just a few lines of code.

How to Use a Custom Modal Library (SweetAlert2)​

Step 1: Include the Library​

You can include SweetAlert2 in your project via a CDN or by installing it from npm.

HTML (CDN Method): Add this script tag to your HTML file, preferably at the end of the <body>.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Step 2: Call the Library's Function​

Instead of alert(), you call the library's function (in this case, Swal.fire()) with an options object.

JavaScript:

Swal.fire({
  title: 'My Custom Title!',
  text: 'This is the body of my custom alert.',
  icon: 'success', // 'success', 'error', 'warning', 'info', 'question'
  confirmButtonText: 'Cool!',
});

This will produce a modern, responsive, and stylable alert box with your specified title.

Practical Example: A Custom Confirmation Dialog​

A huge advantage of these libraries is their ability to handle user interaction gracefully using Promises. Here is how you can create a "confirm delete" dialog.

const deleteButton = document.getElementById('delete-btn');

deleteButton.addEventListener('click', () => {
  Swal.fire({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes, delete it!'
  }).then((result) => {
    // The `result` object contains information about how the alert was dismissed.
    if (result.isConfirmed) {
      // If the user clicked "Yes, delete it!"
      Swal.fire(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
      // (Perform the actual deletion logic here)
    }
  });
});

This pattern is far more powerful and user-friendly than the native confirm() dialog.

Conclusion​

While you cannot change the title of the browser's native alert() box, modern web development provides a much better alternative.

  • Native alert() is not customizable and should be avoided for user-facing messages in production applications.
  • The recommended best practice is to use a modal dialog library like SweetAlert2.
  • These libraries allow you to create beautiful, fully customizable alerts with custom titles, text, icons, and buttons, and they handle user interaction asynchronously with Promises.

By using a modern library, you can create a professional and highly interactive experience for your users that is far superior to the limitations of the native alert.

Table of Contents