这篇文章主要为大家展示了html5.2中怎么使用对话框标签,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“html5.2中怎么使用对话框标签”这篇文章吧。
1,简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证只 3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
2017年12月24号,HTML5.2标准固化,也代表着移动端进入HTML5.3规划阶段,虽然HTML5.2固化了,但内部的一些新规范,在移动端的浏览器中的支持性还有待提高,这里我们来看一个算是常用的新被纳入标准的标签吧,它就是对话框标签。
<强> 1。写在前面
说起对话框标签,可能很多人都比较陌生,毕竟这个标签直到HTML5.2标准固定,也只是chrome的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话。
这里我们可能会想到的是,警惕,确认等弹窗,是的,它们是同一个家族的,都是弹出框,接下来我们就简单的看看,对话框标签的一些属性与使用场景。
<强> 2。标签使用
既然是标签,那么其实与我们常用的p, p等标签一样,如上面的示例代码所示,其内部支持任意的其他元素。
这里,你可能会注意到,在上面的示例代码中开放的属性,是的,这个是用来控制这个弹窗的显示和隐藏的,当然,你也可以任性的使用css来控制,只是那样在一些设备的辅助功能时(比如无障碍访问,读屏软件等),就会出现异常了,所以建议还是使用标准中的显示与隐藏功能。
<强> 3。支持的默认方法
首先,对话框标签是HTMLDialogElement的一个示例,继承自HTMLElement,所以,它与p这一的标签是属于同层次的标签,唯一不同的是,它比p有更多的默认功能,这一小节,我们就来看看,对话框有哪些默认的方法供我们使用。
你可以自己先去示例中,操作一下,然后看看有哪些特色,然后再回来对比一下,接下来的总结:
1:近方法,可以多次被调用,即便是隐藏状态,也可以再次被调用。
2:关闭可以传入一个变量,这个变量必须是字符串,在returnVlaue中表现。
3:显示方法,也可以多次被调用,即便在隐藏状态,不会有任何问题。
4:显示方法,不会更改吐司的位置,弹出框原本在什么位置,节目方法调用之后,依然在原有的位置。
5:显示方法,显示位置紧挨着前一个元素后面,居中,没有背后的遮罩层,z - index的显示方式与相对不设置z - index的类似(如果在此之前,没有调用过showModal的话)。
6:如果调用过showModal后,那么节目方法后,元素显示在showModal显示的位置,不会变动(即便内容高度变化了很多)。
7:如果有两个对话框元素,都调用显示方法,在html结构中,后面的对话框会永远覆盖在前面的那个上层(不管那个对话框先调用了节目方法)。
8: showModal的显示,背后会有遮罩层,显示层级是浏览器webview级别的,怎么理解呢,你可以设置一个元素,级别非常高,在使用showModal显示出对话框属性后,对话框都是在最前面的,这一点特别适合做模态框,肯定不会在弹出框出现之后,出现层级混乱的情况。
9: showModal只能调用一次,这里的一次是说,如果对话框在显示状态,那么在再次调用showModal,就会报的错,并且不能直接执行,或者说,只要打开属性存在的情况下,再次调用,都会报错,所以还是使用默认的开放属性来做对话框的显示隐藏更好。
