原生dialog对话框使用

前言

在平常的uniapp跨端开发中,我们可能不会引入ui框架,如果手写一个弹框,则需要每次设置css样式,比较麻烦。本文带大家了解下,原生dialog对话框的使用。

1. 原生dialog元素介绍

原生dialog元素表示一个对话框或其他交互式组件,例如一个可关闭警告、检查器或者窗口。

1.1 属性

除了常规属性,还有一个自身的特殊属性:

  • open:对话框默认打开方式,设置了open则是显示。当没有设置 open 属性时,对话框不应该 显示给用户。推荐使用 .show().showModal() 方法来渲染对话框,而不是使用 open 属性。

  • returnValue: close 方法还支持接收一个参数,这个参数被赋值给 dialog.returnValue。

javascript 复制代码
<button onclick="dialog.close('ok')">关闭</button> 
dialogRef.addEventListener('close',function(){
    console.log('close', dialogRef.returnValue); // ok
})

1.2 方法

  • close: 关闭对话框
  • show/showModal 打开对话框/模态框

showshowModal 的区别是,show 只是 dialog 让元素可见(相当于设置 open=true),showModal 则会让 dialog 呈现模态效果,需要将模态框关闭之后才能和页面上其他元素交互。

具体实现上,当点击 showModal 时,浏览器会在 dialog 内部增加 ::backdrop 伪元素。

1.3 事件

  • cancel:在模态框展示时按下 Esc 按键,那么模态框将自动关闭,并触发 cancelclose 事件
  • close:则是在每次 dialog 元素由 open=true 变为 open=false 时触发,即调用close方法时触发

1.4 dialog 样式

当使用showModal 方法被调用时,dialog 内会插入伪元素 backdrop,并且应用 position: fixed。而 dialog 元素本身的样式则是通过另一个伪类选择器 :modal

  • dialog 元素自身的样式:可以控制 dialog 的背景颜色、边框、位置等。
  • dialog::backdrop,当 dialog 激活并且显示遮罩层的时候,控制遮罩层的样式。

注意:模态框拥有最高层级,不是使用z-index进行控制的

2. dialog使用

2.1 基本使用

xml 复制代码
<style>
dialog:modal{
    border: 1px solid pink;
}
dialog:modal::backdrop{
    background-color: #333;
}
</style>

<button onclick="dialog.show()">打开</button>
<button onclick="dialog.showModal()">打开模态框</button> 
<button onclick="dialog.close('ok')">关闭</button> 

<!-- 系统级别弹框 -->
<dialog id="dialog">
    这是一个弹框
    <button onclick="dialog.close()">关闭</button>
</dialog>


const dialogRef = document.getElementById('dialog')
dialogRef.addEventListener('cancel',function(){
    console.log('cancel');
})
dialogRef.addEventListener('close',function(){
    console.log('close', dialogRef.returnValue);
})

2.2 支持 maskClosable

css 复制代码
 dialog:modal{
    padding: 0;
    border: 1px solid pink;
}
.content {
    padding: 1rem;
}

<dialog id="dialog">
    <div class="content">
        这是一个弹框
        <button onclick="dialog.close()">关闭</button>
    </div>
</dialog>

可以像框架一样,定义一个closable属性

ini 复制代码
document.querySelectorAll("dialog[closable]").forEach(dialog => {
  dialog.onclick = function(event) {
    if(event.target.tagName.toLowerCase() == "dialog") this.close();
  }
});

2.3 添加弹框动画

以添加动画为例:

css 复制代码
#dialog {
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100px);
  }

  to {
    transform: translateY(0);
  }
} 

这样就为弹框添加了一个动画效果。

3. 兼容性问题

dialog兼容性问题不大,如果不兼容,可以使用polyfill进行兼容。官方的dialog-polyfill

总结

最后总结一下:

在开发中,引入原生dialog对话框可以简化弹框的实现,减少CSS设置的麻烦。原生dialog具有open属性、closeshow/showModal方法,以及cancelclose事件。使用showModal方法可以生成模态效果,并插入backdrop伪元素。对话框样式和遮罩层样式可以通过伪类选择器控制。通过自定义属性和动画,增强对话框的功能和视觉效果。如果遇到兼容性问题,可以使用官方的dialog-polyfill解决。

如有错误,请指正O^O!

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨6 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL6 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1117 小时前
css实现div被图片撑开
前端·css