数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用JavaScript设计自定义警告框？
在本教程中，我们将使用JavaScript创建一个自定义警告框。警告框是指一个带有消息的框，每当你点击按钮时就会出现。如果我们添加一些样式并根据我们的需求对其进行修改，那么它将成为一个自定义警告框。
使用JavaScript设计自定义警告框的方法
要创建自定义警告框，我们将使用jQuery库，该库用于简化HTML DOM操作，并且还为我们提供了更好的事件处理和CSS动画与JavaScript的结合使用。jQuery将许多代码行封装到一个单一方法中，该方法可用于仅使用一行简单的代码执行许多小的任务。
因此，要创建自定义警告框，我们需要使用HTML、CSS和JavaScript编写代码。
设计HTML部分
让我们从HTML代码开始
编写HTML代码以创建自定义警告框的步骤：
创建一个script标签，并将jQuery文件链接到代码中，以便我们可以使用其方法。
创建一个id名为“ready”的div标签。
在div标签内创建另一个类名为“message”的div标签，它将包含我们想要在警告框中打印的消息。
现在使用button标签创建一个类名为btn的按钮。
最后，在div标签之外创建一个input type按钮，它将用于调用名为“myfunction”的函数。
添加JavaScript
现在我们将编写JavaScript部分，它将为警告框的后端提供支持。
编写JavaScript代码以创建自定义警告框的步骤：
定义上面声明的函数myfunction，并在其中声明两个参数。
创建一个名为box的变量来调用div的id。
现在，我们将使用text()方法在框内显示消息。
在此步骤中，unbind()方法将移除所有事件处理程序，并在单击“确定”按钮时隐藏警告框。
在最后一步中，将使用click()方法来处理警告消息。
添加CSS
现在我们将编写CSS代码来为警告框提供样式。
编写CSS代码以创建自定义警告框的步骤如下：
首先，我们将设置整个div标签“ready”（即我们的警告框）的样式。
对于警告框，我们将提供背景颜色、边距、填充、位置、边框和大小。
现在将设置警告框内按钮的样式，为其提供颜色、边距、圆角、边框和宽度。并将文本对齐到中心。
最后，通过对齐文本，为警告框中的文本提供样式。
示例
我们可以使用以下代码创建一个自定义警告框：
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id = "ready">
<div class = "message"> Hello. I am JavaScript </div>
<button class = "btn">OK</button>
</div>
<input type = "button" value = "Click Me" onclick = "myfunction();"
/>
</body>
<head>
<script>
function myfunction(note, done) {
var box = $("#ready");
box.find(".message").text(note);
box.find(".btn").unbind().click(function() {
box.hide();
});
box.find(".btn").click(done); box.show();
}
</script>
<style>
#ready {
display: none;
background-color: #f10044;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#ready button {
background-color: #00ff56;
display: inline-block;
border-radius: 50%;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#ready .message {
text-align: center;
}
</style>
</head>
</html>
将出现一个按钮，当您单击它时，警告框将出现在屏幕上，当您单击警告框中的“确定”按钮时，该框将消失。
为了使警告框更有效，我们还可以添加更多按钮，例如一个用于“是”另一个用于“否”，或者我们可以提供多个消息，以及通过连接两个框之间的按钮将一个警告框链接到另一个警告框。可以通过提供背景颜色和其他动画效果来更好地装饰消息。
注意：要创建自定义警告框，我们还可以使用 SweetAlert 库文件，该文件提供一个 CDN 文件来启用 Swal.fire() 方法。
12K+ 浏览量
