浅谈HTML5中dialog元素尝鲜


Posted in HTML / CSS onOctober 15, 2018

对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。

对话框的组成

常见的弹出框形式:

位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等

大小:定宽定高,定宽不定高,不定宽不定高等

开发中的对话框形式就是位置和大小随机组合的一种情况。

但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参考水平垂直居中布局

上面的对话框包含内容的容器,还有一个是对话框下面的遮罩层(mask),遮罩层是用户触发弹出框后,形成的一个对话框与页面主体的分割图层,它的存在可以给用户一个更明显的视觉差效果,同时也起到避免用户触发对话框后的其他不必要的页面主体操作,从而产生更有的用户体验。

存在问题

虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。

  • 到底选择哪一种对话框(对于有选择综合症的人来说一个头疼的问题)
  • 可用性(api的简单与否,是否依赖了其他第三方的库)
  • 可扩展性
  • 浏览器的兼容性支持

那么,有没有一个简单的方法来做做一个对话框呢?当然有,我们可以使用HTML5的 dialog 元素。

HTML5(dialog)

<dialog open>
    <h2> Hello world.</h2>
</dialog>

很简单,我们使用上面的代码就可以做一个弹出内容为‘Hello world.’ 的对话框。

控制对话框的显示/隐藏也很容易,添加 open 属性表示显示,去除为隐藏。当然,我们也可以通过DOM接口来控制 dialog 的显隐(show(), close())

对话框下面的遮罩层,我们可以使用 ::backgrop 伪元素,而它的激活,我们需要使用 showModal() 这个DOM的API,::backgrop 的特性是它的位置在dialog之下,在任何 z-index 之上。

使用 showModal() 不仅可以让遮罩层显示,dialog容器也显示,所以用到 ::backdrop 的时候,可以用 showModal() 代替 show() 这个API;如果按键盘 ESC 键将关闭弹出层,当然你一可以使用 close() 这个DOM API。

我们可以设置 ::backdrop 这个图层为半透明图层,代码如下:

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

除了我们常见的提示信息的弹出层外,还有一类比较使用的是带表单的弹出层。

带表单的弹出层

我们可以使用HTML5的dialog元素结合form元素来做这些弹出层吗?

答:可以

我们怎么做才能让form元素和dialog元素紧密的结合起来呢?

答:我们只需要在dialog元素中添加 method="dialog" 这个属性即可,这样就可以将button元素的属性 value 的值传递给dialog元素。

<dialog>
  <form method="dialog">
    <p>确定 or 取消</p>
    <button type="submit" value="yes">确定</button>
    <button type="submit" value="no">取消</button>
  </form>
</dialog>

<script>
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
</script>

demo

浏览器兼容性

虽然,这是一个比较好用的HTML5,但是还存在兼容性问题,chrome和opera支持的比较好,Firefox中是实验特性,但是IE,Edge, safari支持的不好,ios不支持,Android也支持的不够好,只有Android6以后支持。具体可参考caniuse

那么,能不能让旧版本的浏览器支持HTML5的dialog呢?首先,我们想到的是有没有一个支持dialog的polyfill,就像支持es6新特性的babel-polyfill一样,确实有这样一个开源项目a11y-dialog,它分别提供了vue和react的不同版本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 #HTML / CSS
HTML5实现签到 功能
Oct 09 #HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 #HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
You might like
使PHP自定义函数返回多个值
2006/11/26 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
详解package.json版本号规则
2019/08/01 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
材料成型专业个人求职信范文
2013/09/25 职场文书
农业资源与环境专业自荐信范文
2013/12/30 职场文书
电子商务自荐书范文
2014/01/04 职场文书
好军嫂事迹材料
2014/01/15 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书