How to show Image in an Alert Box using JavaScript ?

Last Updated : 05 Apr, 2024

Adding images in JavaScript alerts can make messages more eye-catching and easier to understand. It’s a way to attract your attention and make the alerts more attractive. We will show the steps on how to put images in our JavaScript alerts and make your notifications clearer and more engaging for users.

Approach

First, create a basic HTML and provide a CSS style.
In the HTML code provide a class or id in every tag which helps you to get a reference in JavaScript.
In the javascript get the reference for all the needed tags and then handle the “click” event for the button’s using “addEventListener”.
You can add the description of the alert type at the bottom of time for that first create an element using the “createElement()” method and append it in the model using the “appendChild()” method
When you close the alert remove it using the “removeChild()” method.

Example: This example shows an image in an alert box using JavaScript

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
          Show image in alert box
          using JavaScript
      </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="main_container">
        <h1>Geeksforgeeks Welcome you
            to Show image in alert
        </h1>
        <p>Here's some good content for you:</p>
        <ul>
            <li>OpenAI Python API - Complete Guide</li>
            <li>OpenAI is the leading company in the
                field of AI. With the public release
                of software like ChatGPT, DALL-E, 
                  GPT-3, and Whisper, the company has
                  taken the entire AI industr...
            </li>

        </ul>
        <button id="alert_button">
            Show Image button
        </button>
    </div>

    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close" id="close_img">
            &times;
        </span>
        <div class="modal-content" 
             id="modal-content">
            <img id="modal-img">
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #0ee25c;
    margin: 0;
    padding: 0;
}

.main_container {
    width: 90%;
    max-width: 800px;
    margin: 10rem auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

li {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
    cursor: pointer;
}

li:hover {
    background-color: #e0e0e0;
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #fff;
    color: #0ee25c;
    border: 2px solid #007bff;
}

.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.9);
}

.modal-content {
    margin: auto;
    width: 80%;
    max-width: 700px;
    background-color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.close {
    color: #ccc;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: 0.3s;
}

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

@media screen and (max-width: 768px) {
    .main_container {
        width: 90%;
        margin: 5rem auto;
    }
}

@media screen and (max-width: 480px) {
    .main_container {
        width: 90%;
        margin: 3rem auto;
    }
}

JavaScript

let modal = document.getElementById("myModal");
let modalContent = document.getElementById("modal-content");
let modalImg = document.getElementById("modal-img");
let alert_button = document.getElementById("alert_button");
let close_img = document.getElementById("close_img");
let imgSrc =
"https://media.geeksforgeeks.org/wp-content/uploads/20230602174859/OpenAI-Python-Tutorial-.webp";
alert_button.addEventListener("click", function () {
    modal.style.display = "block";
    modalImg.src = imgSrc;
    let image_text = document.createElement("p");
    image_text.textContent = "You clicked the image button!";
    modalContent.appendChild(image_text);
});
close_img.addEventListener("click", function () {
    let image_text = modalContent.querySelector("p");
    modalContent.removeChild(image_text);
    modal.style.display = "none";
});