浅谈HTML5中dialog元素尝鲜

对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。 对话框的组成 常见的弹出框形式: 位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等 大小:定宽定高,定宽不定高,不定宽不定高等 开发中的对话框形式就是位置和大小随机组合的一种情况。 但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参考水平垂直居中布局 上面的对话框包含内容的容器,还有一个是对话框下面的遮罩层(mask),遮罩层是用户触发弹出框后,形成的一个对话框与页面主体的分割图层,它的存在可以给用户一个更明显的视觉差效果,同时也起到避免用户触发对话框后的其他不必要的页面主体操作,从而产生更有的用户体验。 存在问题 虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。 到底选择哪一种对话框(对于有选择综合症的人来说一个头疼的问题) 可用性(api的简单与否,是否依赖了其他第三方的库) 可扩展性 浏览器的兼容性支持 那么,有没有一个简单的方法来做做一个对话框呢?当然有,我们可以使用HTML5的 dialog 元素。 HTML5(dialog)

Hello world.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法