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

By creating a custom alert box in JavaScript

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.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg';
        }
        function closeModal() {
            const modal = 
                document.getElementById('myModal');
            modal.style.display = 'none';
        }
    </script>
</body>

</html>

Output:

fosiGIF

Using SweetAlert Library

In this approach, we are using SweetAlert Library to create the alert/confirm box. The SweetAlert library allows us to create custom alert and confirm boxes in JavaScript with ease. To display image in alert box we will use imageUrl option which specifies the URL of the image to be displayed.

Example: The below code implements the SweetAlert Library to create a custom alert box.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Display Image in SweetAlert
    </title>
    <script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@11">
    </script>
</head>
<style>
    body {
        text-align: center;
    }

    h1 {
        color: green;
    }

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

<body>
    <h1>
        Displaying image in alert box 
        <br/>using SweetAlert Library
    </h1>
    <button onclick="showSweetAlert()">
        Show SweetAlert with Image
    </button>
    <script>
        function showSweetAlert() {
            Swal.fire({
                imageUrl: 
'https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg',
                showCloseButton: true,
            });
        }
    </script>
</body>

</html>

Output:

fosiGIF

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions