浏览器在ios系统下界面 寰宇浏览器

文件名:UB-Launcher.exe 支援语系:繁体
中文、简体中文、English
适用:Windows XP以上版本

寰宇浏览器

2018你应该了解的前端新技术:新标签dialog

作者:寰宇浏览器编辑小组 来源:网络整理 2018-04-13 10:30 说起dialog标签,可能很多人都比较陌生,毕竟这个标签直到HTML5.2标准固定,也只是chrome的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话。

这里我们可能会想到的是,alert,confirm等弹窗,是的,它们是同一个家族的,都是弹出框,接下来我们就简单的看看,dialog标签的一些属性与使用场景。

这是一个有意思的标签,那就是对话窗或窗口,也就是dialog,其基本用法如下

<dialog open>
//soming...
</dialog>

open属性表明该窗口是默认显示的,用户可与之交互。相关js方法有:

1.close():关闭对话框,可选传入类型为{domxref("DOMString")}}的参数,用来更新对话框的returnValue。

2.open():非模式化的显示这个对话框, 即:打开这个对话框之后依然可以和其他内容进行交互。可选传入类型为Element或者MouseEvent的参数,用来定义对话框的显示位置。

3.showModal():模式化的显示这个对话框,并且将会至于所有其他对话框的顶层(屏蔽其他对话框的交互)。可选传入类型为Element或者MouseEvent的参数, 用来定义对话框的显示位置。 show()和showModal()是有区别的,show只是显示dialog,而showMadal()是会屏蔽其他的弹出层。 按ESC可以关闭dialog,dialog需要重新定义css样式,毕竟本身css是默认的样式。

下面是一个demo代码:

寰宇浏览器