对话框元素
<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); })
