Creating a Custom Alert Function

Using SweetAlert Library

In this approach, HTML, CSS, and JavaScript are used to create an alert box with a custom title and message. The HTML creates a custom alert with a title, message, and a close button. CSS styles make it look good and position it in the middle. JavaScript functions control when to show or hide the alert. When you click Show Alert, it pops up clicking OK hides it.

Example: The example below shows how to Edit a JavaScript Alert Box Title using the Custom Alert Function.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Custom Alert Box</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="text-center mt-5">
        <h2 class="text-success">
          w3wiki
          </h2>
        <p>
              How to edit a JavaScript 
              alert box title?
          </p>
        <button onclick="showAlert()" 
                class="btn btn-success">
              Show Alert
          </button>
    </div>

    <div id="customAlert" class="p-5 bg-light mx-auto
                                 w-50 mt-5 text-center
                                 d-none">
        <div>
            <div>
                <h4>w3wiki</h4>
            </div>
            <div> 
                  Welcome to w3wiki! Explore our 
                    vast collection of articles, tutorials,
                    and coding challenges to enhance your 
                    programming skills.
            </div>
            <button onclick="closeAlert()" 
                    class="mt-2 btn btn-success">
                  OK
              </button>
        </div>
    </div>

    <script>
        function showAlert() {
            document.getElementById('customAlert')
                      .classList.remove('d-none');
        }

        function closeAlert() {
            document.getElementById('customAlert')
                      .classList.add('d-none');
        }
    </script>

</body>

</html>

Output:

Output

How to edit a JavaScript Alert Box Title in Bootstrap ?

JavaScript alert boxes are an essential component, frequently used to deliver important messages or notifications to users. There are two methods to edit the title of a JavaScript alert box.

First, you can create a custom modal dialog, offering complete control over appearance and functionality. Alternatively, you can use a library like SweetAlert, providing more customization options than the default alert function.

Table of Content

Creating a Custom Alert Function
Using SweetAlert Library

Tags:

#JavaScript #Web Technologies

Using SweetAlert Library

Creating a Custom Alert Function

How to edit a JavaScript Alert Box Title in Bootstrap ?

Similar Reads

Contact Us