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">&times;</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><!显示自定义对话框的按钮 >

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/375579.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。