用dialog标签写一个完整的弹窗,
时间: 2024-09-18 07:03:46 浏览: 32
html5-新标签-dialog弹窗内置组件
在HTML5中,`<dialog>` 标签用于创建可交互的模态窗口或对话框,它是一种让用户暂停当前页面内容并与之交互的方式。下面是一个简单的例子,展示如何编写一个包含标题、文本输入和关闭按钮的基本弹窗:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对话框示例</title>
</head>
<body>
<!-- 创建 dialog 元素 -->
<dialog id="myModal" open>
<h2>这是一个对话框</h2>
<p>请输入信息:</p>
<input type="text" id="inputText">
<button type="button" onclick="closeDialog()">关闭</button>
</dialog>
<script>
// 关闭对话框的函数
function closeDialog() {
var dialog = document.getElementById("myModal");
dialog.close();
}
</script>
</body>
</html>
```
在这个例子中,点击关闭按钮会触发 `closeDialog()` 函数,该函数通过 `dialog.close()` 方法关闭对话框。注意 `<dialog>` 的 `open` 属性需要手动设置或通过 JavaScript 动态设置,以便使其可见。
阅读全文