对话框元素
<dialog> HTML元素用来表示对话框或者其他交互式组件
使用场景:点击按钮 弹出对话框;警告提示信息框; 定义一个对话框、确认框或窗口...
方法:
Dialog 对象属性
| 属性 | 描述 |
|---|---|
| open | 设置或者返回对话窗口是否打开 |
| returnValue | 设置或者返回 dialog 的返回值 |
对话框默认是隐藏的,需要加上在<dialog>加上open属性
<dialog open></dialog>
Dialog 对象方法
| 方法 | 描述 |
|---|---|
| close() | 关闭对话窗口 |
| show() | 显示的对话框 |
| showModal() | 显示对话框，并使其成为最顶层的对话框 |
通过 showModel()方法来展示模态框
具体代码小demo演示:
HTML部分
<button class="btn show">显示对话框</button>
<dialog>
<p>我是一段测试文字用来占位置</p>
<form method="dialog">
<button class="btn ok" value="Yes">Yes</button>
<button class="btn close" value="No">No</button>
</form>
</dialog>
CSS部分
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
dialog {
width: 400px;
height: 200px;
border-radius: 20px;
background-color: #62656e;
}
/* 修改模态框的背景样式*/
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
dialog p {
color: aliceblue;
text-align: center;
}
.btn {
display: block;
margin: 0 auto;
width: 150px;
height: 50px;
background-color: black;
cursor: pointer;
font-size: 16px;
color: aliceblue;
border-radius: 10px;
}
form {
margin-top: 80px;
display: flex;
}
JS部分
//1.获取dialog 元素
let dialog = document.querySelector('dialog')
let show = document.querySelector('.show')
// 2.给按钮添加点击事件 点击之后
show.addEventListener('click', () => {
// 调用dialog身上的方法showModal() 来显示模态框
dialog.showModal()
})
dialog.addEventListener('close', () => {
// 点击确认和取消按钮 返回指定的值,这里用的close事件
console.log(dialog.returnValue);
})
