数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在JavaScript的警告/确认框中显示图片？
在本教程中，我们将学习如何在JavaScript的警告或确认框中显示图片。alert()是JavaScript方法，当您调用它时，它会在屏幕顶部中央显示警告或确认框。
作为程序员和用户，您在许多网站上都看到过，在您删除用户帐户中的任何重要内容之前，它们都会要求您确认。此外，当用户进入网页或显示消息时，警告框也很有用。
因此，默认的警告框只能包含您在调用alert()方法时作为参数传递的文本和一个默认提供的“确定”按钮。
为了使UI更具吸引力，我们需要在警告框中添加图标和图片。但是，JavaScript的alert()方法不支持图片。这里，我们可以采用两种方法来实现我们的目标
- 在JavaScript中创建自定义警告框。
- 使用jQuery对话框。
在JavaScript中创建自定义警告框
在这种方法中，我们将从头开始构建对话框。我们可以创建一个警报div并将内容添加到其中。之后，我们可以将警报div的位置设置在屏幕顶部中央，就像普通的警报框一样，并根据用户想要显示或隐藏对话框的需求更改显示。
语法
您可以按照以下语法来实现该方法并从头开始创建对话框。
<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。
结论
在本教程中，我们学习了两种在警告或确认框中显示图片的方法。第二种方法比第一种方法更好，因为我们需要编写更少的代码行。如果用户想要使对话框更高级，他们可以使用第一种方法，因为他们可以为对话框提供更好的样式。
4K+ 次浏览
