<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
dialog:not([open]) {
display: none;
}
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: -webkit-fit-content;
height: -webkit-fit-content;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;
}
dialog::backdrop {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.1);
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6)
}
</style>
<body>
<dialog close>
// open
<h1>我是一级标题</h1>
<div>我是对话窗口,你已经打开了我!</div>
<button id="close_dialog">关闭</button>
</dialog>
<button id="open_dialog">打开</button>
<script>
var dialog = document.getElementsByTagName("dialog")[0],
openDialog = document.getElementById("open_dialog"),
closeDialog = document.getElementById("close_dialog");
openDialog.onclick = function () {
dialog.showModal();// 或者show(),这是有区别的
}
closeDialog.onclick = function () {
dialog.close();
}
</script>
</body>
</html>
03 h5对话框dialog
最新推荐文章于 2024-06-25 08:00:28 发布