- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do I display image in alert/confirm box in JavaScript?
In this tutorial, we will learn to display the image in the alert or confirm box in JavaScript. The alert() is the JavaScript method that displays the alert or confirms box on the top center of the screen when you invoke it.
As a programmer and user, you have seen on many websites that they ask you for confirmation in the dialog box before you delete any precious thing in your user's account. Also, the alert box can be helpful to show some information when a user comes into the web page or a message.
So, the default alert box can have only text you pass as an argument in the alert() method while invoking it and an ok button that comes by default.
To make UI attractive, we need to add icons and images to the alert box. However, the JavaScript alert() method doesn’t support the image. Here, we can have two solutions to achieve our goal:
- Creating a custom alert box in JavaScript.
- Using the jQuery dialog box.
Creating the Custom Alert Box in JavaScript
In this method, we will build the dialog box from scratch. We can create an alert div and add content to that. After that, we can set the position of the alert div on the top center of the screen like a normal alert box and change the display according to the users who want to show or hide the dialog box.
Syntax
You can follow the syntax below to implement the method and create the dialog box from scratch.
<script>
var alertDiv = document.getElementById("alert");
// to show alert box change display
function invokeAlert() {
alertDiv.style.display = "block";
}
// to hide alert box, make display none using JavaScript
function closeDialog() {
alertDiv.style.display = "none";
}
</script>Approach
First, we will create a single div that will work as the dialog box and add the images and other content to the dialog div.
After that, we will create a show dialog button, and when the user clicks on that, we invoke the function which changes the display of the dialog box.
Also, we have added the close button inside the dialog box, and when the user clicks on that, it will invoke a JavaScript function to change the display of dialog div to none.
Example
In this example, we will create a custom dialog box following the above steps.
<html>
<head>
<title> Add image to alert / confirmation box. </title>
</script>
<style>
#alert {
display: none;
background-color: lightgrey;
border: 1px solid green;
position: fixed;
width: 250px;
left: 45%;
top: 2%;
padding: 6px 8px 8px;
text-align: center;
}
img {
width: 10rem;
height: 10rem;
}
button {
border-radius: 12px;
height: 2rem;
padding: 10px;
cursor: pointer;
border: 2px solid green;
background-color: aqua;
}
</style>
</head>
<body>
<h2> Add image to alert / confirm box. </h2>
<h4> Creating custom dialog box using JavaScript. </h4>
<div id = "alert">
<p> Welcome to the tutorialsPoint! </p>
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt="tutorialsPoint"> </img>
<button id="close" onclick="closeDialog()"> Close </button>
</div>
<button onclick='invokeAlert();'> Show alert </button>
<script>
var alertDiv = document.getElementById("alert");
function invokeAlert() {
alertDiv.style.display = "block";
}
function closeDialog() {
alertDiv.style.display = "none";
}
</script>
</body>
</html>Using the jQuery dialog() Method
jQuery is the JavaScript library and the advanced version of JavaScript. The jQuery contains the dialog() method, which works similarly to the JavaScript alert() method.
Syntax
You can follow the below syntax to use the image inside the JQuery dialog box.
<script>
// convert div as a dialog
$(function () {
$("#div_Id").dialog();
});
</script>
<div id="imgInDialog" title="Alert Box">
<img src="" />
</div>Parameters
div_Id − It is the id of the div in which you have added the image and want to convert it to the dialog box using the jQuery dialog() method.
Example
In the example below, we created the div to display it inside the dialog box and added an image inside it. After that, using jQuery, we accessed the div using the div id and invoked the dialog() method for the div, which converts the div to the dialog.
Also, we have added jQuery CDNs for the style of the dialog box <head> in the tag. We have added some styles to make the default dialog box more attractive.
<html>
<head>
<title> Add image to alert / confirmation box. </title>
<!-- jquery CDN for dialog boxes -->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background: lightgreen;
color: blue;
font-size: 20px;
}
#dialog {
text-align: center;
}
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h2> Add image to alert / confirmation box.</h2>
<h4> Show image in the dialog box using the jQuery dialog() method. </h4>
<!-- content of the dialog box. -->
<div id = "imgInDialog" title = "Alert Box">
<p> Welcome to the tutorialsPoint! </p>
<img src="https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt="tutorialsPoint" />
</div>
<script>
// open the imgInDialog div in the dialog box.
$(function () {
$("#imgInDialog").dialog();
});
</script>
</body>
</html>In the output, users can see the div in the dialog box which contains the image and welcome message.
Conclusion
In this tutorial, we have learned two methods to show the image inside the alert or confirmation box. The second approach is better than the first one as we need to write fewer lines of code. If users want to make the dialog box more advance, they can use the first approach as they can give better styling to the dialog box.
4K+ Views
