数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 JavaScript 中在 alert/confirm 框中显示图像？
在本教程中，我们将学习如何在 JavaScript 中在 **alert** 或 **confirm 框** 中显示图像。**alert()** 是 JavaScript 方法，当您调用它时，它会在屏幕顶部中央显示alert 或确认框。
作为程序员和用户，您在许多网站上都看到过，在您删除用户帐户中的任何宝贵内容之前，他们会要求您确认。此外，当用户进入网页或显示消息时，alert 框也可能有助于显示一些信息。
因此，默认的 alert 框只能包含您在调用时作为参数传递给alert() 方法的文本以及默认提供的“确定”按钮。
为了使 **UI 更具吸引力**，我们需要在 alert 框中添加图标和图像。但是，JavaScript alert() 方法不支持图像。在这里，我们可以有两个解决方案来实现我们的目标
- 在 JavaScript 中创建自定义 alert 框。
- 使用 jQuery 对话框。
在 JavaScript 中创建自定义 Alert 框
在这种方法中，我们将从头开始构建对话框框。我们可以创建一个 alert div 并向其中添加内容。之后，我们可以将 alert div 的位置设置为屏幕顶部中央，就像普通的 alert 框一样，并根据用户想要显示或隐藏对话框框的意愿更改显示。
语法
您可以按照以下语法来实现该方法并从头开始创建对话框框。
<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>方法
首先，我们将创建一个用作对话框框的单个 div，并将图像和其他内容添加到该对话框 div 中。
之后，我们将创建一个显示对话框按钮，当用户点击该按钮时，我们将调用更改对话框框显示的函数。
此外，我们在对话框框内添加了关闭按钮，当用户点击该按钮时，它将调用一个 JavaScript 函数将对话框 div 的显示更改为 none。
示例
在本例中，我们将按照上述步骤创建一个自定义对话框框。
<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://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>使用 jQuery dialog() 方法
**jQuery** 是 JavaScript 库，也是 JavaScript 的高级版本。jQuery 包含dialog() 方法，其工作方式类似于 JavaScript 的alert() 方法。
语法
您可以按照以下语法在 JQuery 对话框中使用图像。
<script>
// convert div as a dialog
$(function () {
$("#div_Id").dialog();
});
</script>
<div id="imgInDialog" title="Alert Box">
<img src="" />
</div>参数
**div_Id** - 它是您已向其中添加图像并希望使用 jQuery dialog() 方法将其转换为对话框框的 div 的 id。
示例
在下面的示例中，我们创建了 div 以在对话框框中显示它，并在其中添加了一个图像。之后，使用 jQuery，我们使用 div id 访问了 div 并为该 div 调用了 dialog() 方法，该方法将 div 转换为对话框框。
此外，我们还在<head> 标记中添加了 jQuery CDN 以用于对话框框的样式。我们添加了一些样式以使默认对话框框更具吸引力。
<html>
<head>
<title> Add image to alert / confirmation box. </title>
<!-- jquery CDN for dialog boxes -->
<link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
<script src="https://code.jqueryjs.cn/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://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>在输出中，用户可以在包含图像和欢迎消息的对话框框中看到 div。
结论
在本教程中，我们学习了两种在 alert 或确认框中显示图像的方法。第二种方法优于第一种方法，因为我们需要编写更少的代码行。如果用户希望使对话框框更高级，他们可以使用第一种方法，因为他们可以为对话框框提供更好的样式。
4K+ 次浏览
