By creating a custom alert box in JavaScript

Using SweetAlert Library

In this approach, we are creating a custom alert box using HTML, CSS, and JavaScript. The alert box is displayed as a modal dialog box which contains an image element for displaying the image.

Example: The below code example creates a custom alert box with images in it.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Display Image in Custom Alert Box
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            max-width: 600px;
            text-align: center;
            border-radius: 5px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-content img {
            height: auto;
            border-radius: 5px;
        }

        button{
            background-color: green;
            border: none;
            border-radius: 5px;
            padding: 10px;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>
        Displaying image in alert box by 
        <br/>creating custom alert box
    </h1>
    <button onclick="openModal()">
        Show Alert with Image
    </button>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal()">
                &times;
            </span>
            <img id="modalImg" src="" alt="Image">
            <p>
                This is a custom alert box with
                an image in it.
            </p>
        </div>
    </div>

    <script>
        function openModal() {
            const modal = 
                document.getElementById('myModal');
            const modalImg = 
                document.getElementById('modalImg');
            modal.style.display = 'block';
            modalImg.src = 
'https://media.w3wiki.org/wp-content/uploads/20231004184219/gfglogo0.jpg';
        }
        function closeModal() {
            const modal = 
                document.getElementById('myModal');
            modal.style.display = 'none';
        }
    </script>
</body>

</html>

Output:

How to Display Image in Alert/Confirm Box in JavaScript ?

This article explores how to display an image in an alert box to enhance the user experience with a visually appealing interface. The standard JavaScript alert() method doesn’t support images.

Table of Content

By creating a custom alert box in JavaScript
Using SweetAlert Library

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

Using SweetAlert Library

By creating a custom alert box in JavaScript

How to Display Image in Alert/Confirm Box in JavaScript ?

Similar Reads

Contact Us