How to Replace a JavaScript Alert Pop up with a fancy Alert Box ?

Last Updated : 17 Apr, 2024

JavaScript alert popups are an easy and effective way to show users messages, but they are not very customizable and don’t always look good. Several methods exists in JavaScript to replace a JavaScript alert pop-up with a fancy alert box which are as follows:

Table of Content

Using Custom HTML and CSS
Using a SweetAlert Library
Using CSS Frameworks

Using Custom HTML and CSS

You create the box’s HTML structure (including title, message, and buttons) and style it with CSS for a unique look and feel. This approach offers maximum control but requires more coding effort.

Example: This code creates a button that displays a custom alert box when clicked, allowing users to view a message and close the alert when desired.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="display: flex; justify-content: center; 
             align-items: center; height: 100vh; margin: 0;">
  <button onclick="showAlert()">Show Alert</button>

  <div id="myAlert">
    <h2>Fancy Alert Box</h2>
    <p>This is a custom alert message.</p>
    <button onclick="closeAlert()">Close</button>
  </div>

  <script>
    function showAlert() {
      document
        .getElementById("myAlert")
        .style
        .display = "block";
    }

    function closeAlert() {
      document
        .getElementById("myAlert")
        .style
        .display = "none";
    }
  </script>

  <style>
    #myAlert {
      display: none;
      /* Initially hidden */
      position: fixed;
      /* Stays in place when scrolling */
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      /* Center the box */
      background-color: #f1f1f1;
      padding: 20px;
      border: 1px solid #ddd;
    }
  </style>
</body>

</html>

Output:

Output

Using a SweetAlert Library

Libraries such as Noty.js and SweetAlert2 provide pre-made, editable alert boxes with buttons, icons, and animations. They make the process easier, but they also add an external dependence.

Example: Clicking the button displays a SweetAlert2 alert box with a title, message, icon, and a “Cool” button.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
         rel="stylesheet" 
         integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
         crossorigin="anonymous">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>
<body>
  <button id="myButton" class="btn btn-primary">Show Alert</button>

  <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
  </script>
  <script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@11">
  </script>

  <script>
  document
  .getElementById("myButton")
  .addEventListener("click", function() {
    Swal.fire({
      title: 'Fancy Alert!',
      text: 'This is a message from SweetAlert2',
      icon: 'success',
      confirmButtonText: 'Cool'
    });
  });
  </script>
</body>
</html>

Output:

Output

Using CSS Frameworks

Various styles and functionalities of pre-designed alert components are available using frameworks such as Materialize and Bootstrap. They provide a simple and quick fix, but the versatility of customization may be limited.

Example: Implementing a fancy alert box using Materialize CSS framework for improved user experience and visual appeal.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Fancy Alert Box with Materialize</title>
  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <style>
    .my-alert {
      border-radius: 10px;
      /* Rounded corners */
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
  </style>
</head>

<body>

  <button id="myButton" 
          class="waves-effect waves-light btn modal-trigger"
          href="#myAlert">Show Alert</button>

  <div id="myAlert" 
       class="modal my-alert">
    <div class="modal-content center-align">
      <h4>Attention!</h4>
      <p>This is a fancy Materialize alert box.</p>
    </div>
    <div class="modal-footer">
      <a href="#!" 
         class="modal-close waves-effect waves-green btn-flat">Close</a>
    </div>
  </div>

  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
  </script>
  <script>
    document
    .addEventListener('DOMContentLoaded', function () {
      let elems = document
      .querySelectorAll('.modal');
      let instances = M
      .Modal
      .init(elems);
    });
  </script>
</body>

</html>