Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How do I display image in alert/confirm box in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to display images in alert or confirm boxes in JavaScript. The standard alert() method displays a simple dialog box with text and an OK button, but it doesn't support images directly.

To create more attractive and informative dialogs with images, we have two main approaches:

  • Creating a custom alert box using vanilla JavaScript
  • Using jQuery's dialog() method

Method 1: Creating a Custom Alert Box

This approach involves creating a custom HTML div that mimics an alert box and can contain images, styled content, and custom buttons.

Syntax

// Get reference to alert div
var alertDiv = document.getElementById("alert");

// Show custom alert
function showAlert() {
   alertDiv.style.display = "block";
}

// Hide custom alert
function closeAlert() {
   alertDiv.style.display = "none";
}

Example

<!DOCTYPE html>
<html>
<head>
   <title>Custom Alert with Image</title>
   <style>
      #customAlert {
         display: none;
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         background: white;
         border: 2px solid #007bff;
         border-radius: 8px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0,0,0,0.1);
         z-index: 1000;
      }
      
      #overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0,0,0,0.5);
         z-index: 999;
      }
      
      .alert-image {
         width: 80px;
         height: 80px;
         margin-bottom: 15px;
      }
      
      .close-btn {
         background: #007bff;
         color: white;
         border: none;
         padding: 8px 16px;
         border-radius: 4px;
         cursor: pointer;
         margin-top: 15px;
      }
   </style>
</head>
<body>
   <h2>Custom Alert Box with Image</h2>
   <button onclick="showCustomAlert()">Show Custom Alert</button>
   
   <div id="overlay"></div>
   <div id="customAlert">
      <img src="/javascript/images/logo.png" alt="Success" class="alert-image">
      <h3>Success!</h3>
      <p>Your operation completed successfully.</p>
      <button class="close-btn" onclick="closeCustomAlert()">OK</button>
   </div>
   
   <script>
      function showCustomAlert() {
         document.getElementById("overlay").style.display = "block";
         document.getElementById("customAlert").style.display = "block";
      }
      
      function closeCustomAlert() {
         document.getElementById("overlay").style.display = "none";
         document.getElementById("customAlert").style.display = "none";
      }
   </script>
</body>
</html>

Method 2: Using jQuery Dialog

jQuery UI provides a powerful dialog() method that can easily display content including images in a modal dialog box.

Syntax

// Convert div to dialog
$("#dialogDiv").dialog({
   title: "Alert Title",
   modal: true,
   width: 400,
   height: 300
});

Example

<!DOCTYPE html>
<html>
<head>
   <title>jQuery Dialog with Image</title>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
   
   <style>
      .ui-dialog-titlebar {
         background: linear-gradient(to bottom, #4CAF50, #45a049);
         color: white;
         text-align: center;
      }
      
      .dialog-content {
         text-align: center;
         padding: 20px;
      }
      
      .dialog-image {
         width: 100px;
         height: 100px;
         margin-bottom: 15px;
      }
   </style>
</head>
<body>
   <h2>jQuery Dialog with Image</h2>
   <button onclick="showJQueryDialog()">Show jQuery Dialog</button>
   
   <div id="imageDialog" title="Information" style="display: none;">
      <div class="dialog-content">
         <img src="/javascript/images/info.png" alt="Information" class="dialog-image">
         <h3>Welcome to TutorialsPoint!</h3>
         <p>Learn programming with our comprehensive tutorials.</p>
      </div>
   </div>
   
   <script>
      function showJQueryDialog() {
         $("#imageDialog").dialog({
            modal: true,
            width: 350,
            height: 280,
            resizable: false,
            buttons: {
               "OK": function() {
                  $(this).dialog("close");
               }
            }
         });
      }
   </script>
</body>
</html>

Comparison

Method Complexity Dependencies Customization
Custom JavaScript Medium None Full control
jQuery Dialog Low jQuery UI Limited but sufficient

Key Points

  • Native JavaScript alert() cannot display images
  • Custom solutions provide complete control over styling and behavior
  • jQuery UI offers pre-built, professional-looking dialogs
  • Always include proper accessibility features like keyboard navigation

Conclusion

While JavaScript's native alert() doesn't support images, both custom HTML dialogs and jQuery UI provide excellent alternatives. Choose the custom approach for maximum flexibility or jQuery UI for quick implementation with professional styling.

Updated on: 2026-03-15T23:18:59+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements