上一篇
html5如何弹对话框
HTML5提供了多种方式来创建对话框，包括警告框、确认框、提示框等，这些对话框可以帮助用户进行交互，提供信息或者获取用户的输入，下面将详细介绍如何使用HTML5创建各种类型的对话框。
1、警告框（Alert）
警告框是一种非常常见的对话框类型，用于向用户显示一条消息并等待用户确认，可以使用alert()函数来创建警告框，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<script>
function showAlert() {
alert("这是一个警告框！");
}
</script>
</head>
<body>
<button onclick="showAlert()">点击显示警告框</button>
</body>
</html>
在这个示例中，当用户点击按钮时，会触发showAlert()函数，该函数使用alert()函数创建一个警告框，显示一条消息，当用户点击警告框上的“确定”按钮时，警告框会关闭。
2、确认框（Confirm）
确认框用于向用户显示一条消息，并等待用户选择“确定”或“取消”，可以使用confirm()函数来创建确认框，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<script>
function showConfirm() {
var result = confirm("你确定要继续吗？");
if (result) {
document.write("你点击了确定");
} else {
document.write("你点击了取消");
}
}
</script>
</head>
<body>
<button onclick="showConfirm()">点击显示确认框</button>
</body>
</html>
在这个示例中，当用户点击按钮时，会触发showConfirm()函数，该函数使用confirm()函数创建一个确认框，显示一条消息，当用户点击确认框上的“确定”按钮时，confirm()函数返回true，否则返回false，根据返回值，我们可以判断用户是点击了“确定”还是“取消”。
3、提示框（Prompt）
提示框用于向用户显示一条消息，并等待用户输入文本，可以使用prompt()函数来创建提示框，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<script>
function showPrompt() {
var name = prompt("请输入你的名字：", "张三");
if (name != null) {
document.write("你好，" + name + "！");
} else {
document.write("你取消了输入");
}
}
</script>
</head>
<body>
<button onclick="showPrompt()">点击显示提示框</button>
</body>
</html>
在这个示例中，当用户点击按钮时，会触发showPrompt()函数，该函数使用prompt()函数创建一个提示框，显示一条消息和一个文本输入框，用户可以在文本输入框中输入文本，当用户点击提示框上的“确定”按钮时，prompt()函数返回用户输入的文本；当用户点击提示框上的“取消”按钮或者关闭提示框时，prompt()函数返回null，根据返回值，我们可以判断用户是否输入了文本。
4、自定义对话框（Custom）
HTML5还支持自定义对话框，即使用HTML、CSS和JavaScript创建具有自定义样式和功能的对话框，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 自定义对话框样式 */
.modal {
display: none; /* 默认隐藏对话框 */
position: fixed; /* 固定对话框位置 */
zindex: 1; /* 确保对话框在其他元素之上 */
left: 0; top: 0; width: 100%; height: 100%; /* 对话框宽度和高度为100% */
backgroundcolor: rgba(0,0,0,0.4); /* 黑色半透明背景 */
}
.modalcontent {
backgroundcolor: #fefefe; /* 白色背景 */
margin: 15% auto; /* 居中显示 */
padding: 20px; /* 内边距 */
border: 1px solid #888; /* 边框 */
width: 80%; /* 宽度 */
}
.close { /* “关闭”按钮样式 */
color: #aaa; /* 字体颜色 */
float: right; /* 靠右显示 */
fontsize: 28px; /* 字体大小 */
}
.close:hover,.close:focus { /* “关闭”按钮悬停和聚焦状态样式 */
color: black; /* 字体颜色 */
textdecoration: none; /* 去除下划线 */
cursor: pointer; /* 光标变为手型 */
}
</style>
</head>
<body>
<!HTML代码 >
<div id="myModal" class="modal"><!对话框容器 >
<div class="modalcontent"><!对话框内容 >
<span class="close">×</span><!“关闭”按钮 >
<p>这是一个自定义对话框！</p><!对话框内容 >
<p><button onclick="document.getElementById('myModal').style.display='none'">关闭</button></p><!“关闭”按钮 >
</div>
</div>
<button onclick="document.getElementById('myModal').style.display='block'">点击显示自定义对话框</button><!显示自定义对话框的按钮 >
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/260789.html
