HTML5
发布时间:2022-04-26 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了浅谈HTML5中dialog元素尝鲜,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
对话框(别称模态框,浮层)是web
项目中用于
用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能
自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。
对话框的组成
常见的弹出框形式:
位置:屏幕的
左上角,右上角,左下角,右下角,垂直居中等
大小:定宽定高,定宽不定高,不定宽不定高等
开发中的对话框形式就是位置和大小
随机组合的一种情况。
但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参
考水平垂直居中布局
上面的对话框包含
内容的容器,还有
一个是对话框下面的遮罩层(mask),遮罩层是
用户触发弹出框后,形成的
一个对话框与
页面主体的分割图层,它的存在可以给
用户一个更明显的视觉差
效果,
同时也起到避免
用户触发对话框后的其他不必要的
页面主体操作,从而产生更有的
用户体验。
存在问题
虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。
到底选择哪一种对话框(对于有选择综合症的人来说
一个头疼的问题)
可用性(api的简单与否,是否依赖了其他第三方的库)
可扩展性
浏览器的兼容性
支持
那么,有没有
一个简单的
方法来做做
一个对话框呢?当然有,我们可以使用HTML5的 dialog 元素。
HTML5(dialog)
大佬总结
以上是大佬教程为你收集整理的浅谈HTML5中dialog元素尝鲜全部内容,希望文章能够帮你解决浅谈HTML5中dialog元素尝鲜所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。