css dialog,javascript dialog

　　2017年12月24日，HTML5.2标准固化，这也意味着移动端进入HTML5.3的规划阶段，虽然HTML5.2固化了，但是移动端的浏览器对一些新的内部规范的支持还有待提高。这里，让我们来看一个新加入标准的常用标签。它是对话框标签。

　　1. 写在前面

　　说起对话框标签，可能很多人都不熟悉。毕竟这个标签只有chrome的浏览器支持，直到HTML5.2标准被修正。至于这个标签的用法，也可以根据语义，conversation来理解清楚。

　　这里我们可能想到的是提醒、确认等弹窗。没错，都是同一家的弹出框。接下来我们就简单看一下对话框标签的一些属性和使用场景。

　　2. 标签使用

　　dialog open= H2 title/H2 p content/p/dialog，既然是标签，其实和我们常用的div、p等标签是一样的。如上面的示例代码所示，它在内部支持任何其他元素。

　　这里，您可能会注意到，上面示例代码中的open属性yes用于控制这个弹出窗口的显示和隐藏。当然也可以任意使用css来控制。只有这样，当设备的一些辅助功能(如无障碍、读屏软件等。)都是不正常的，建议使用标准中的显示和隐藏功能。

　　3. 支持的默认方法

　　首先，dialog标签是HTMLDialogElement的一个例子，继承自HTMLElement。所以和div的标签属于同一级别。唯一的区别是它比div有更多的默认函数。在这一节中，让我们来看看对话框有哪些默认方法可供我们使用。

　　var dialog=document . getelementbyid( dialog )；//假设在页面中，有一个id=dialog的对话框标签。//关闭dialog dialog . Close()；//以toast的形式显示dialog dialog . Show()；//以模态框的形式显示dialog dialog . show modal()；//调用dialog.close()时传入的参数值dialog.returnVlaue//对话框dialog.open的显示状态；你可以自己去例子，操作一下，然后看看有什么特点，再回来对比。以下总结：

　　1: Close方法，可以多次调用，即使隐藏也可以再次调用。

　　2: Close可以传入一个变量。这个变量必须是一个字符串，用returnVlaue表示。

　　show方法也可以多次调用，即使在隐藏状态下，也没有任何问题。

　　4: show方法不会改变toast的位置。弹出框原来在哪里？调用show方法后，它仍在原来的位置。

　　5: Show方法，显示位置紧接在前一个元素后面，居中，后面没有遮罩层。z-index的显示方式类似于不设置z-index的relative(如果之前没有调用showModal)。

　　6:如果调用showModal，那么在show方法之后，元素显示在showModal显示的位置，不会改变(即使内容高度变化很大)。

　　7:如果有两个对话框元素，它们都调用show方法。在html结构中，后面的对话框总是会覆盖前面的上层(不管哪个对话框先调用show方法)。

　　8: showModal的显示，后面会有一个遮罩层，显示级别在浏览器webview级别。怎么理解呢？您可以设置一个非常高的元素级别。使用Showmodal显示对话框属性后，对话框在最前面，特别适合制作模态框。弹出框出现后绝对不会出现层次混乱。

　　9: showModal只能调用一次。这里的一次是指如果对话框处于显示状态，再次调用Showmodal时会报错，不能直接执行。换句话说，只要open属性存在，再次调用时就会报错，所以最好使用默认的open属性隐藏对话框的显示。

　　10:如果页面上有两个对话框元素，并且都在调用showModal方法，那么不管它们在HTML中的结构如何，后面调用的对话框的级别都会高于前面调用的对话框。

　　dialog.returnvlaue的值是调用dialog.close(string)时传入的值，只支持字符串。只有在显示dialog时，通过调用dialog.close传入的值才有效。

　　12:如果close中没有传递任何值，则returnVlaue的值为空。如果dialog.close(1 )的值被传递一次，并且dialog.close()在下一次显示后被关闭，则returnVlaue仍等于“1”。

　　open的返回值为：true/false。

　　4. 支持的默认事件

　　dialog的另一个优点是，除了click等基本事件之外，它还支持两个额外的特殊事件：

　　var dialog=document . getelementbyid( dialog )；//假设在页面中，有一个id=dialog的对话框标签。//调用close方法时，dialog . onclose=function(){ }；//在pc端按下esc键时。但是，在chrome版本之后，似乎就不行了。dialog . on cancel=function(){ }；现在，让我们来看一个例子：对话框事件示例显示。

　　也有几个问题。这里有一个列表：

　　1:只能通过调用dialog.close()隐藏的对话框来触发onclose事件。

　　2:取消事件触发后，关闭事件肯定会继续触发。chrome64之后，取消的触发器不是esc键。

　　3:如果有多个关闭对话框的按钮，那么每次调用close时都会传入不同的值。在close事件的回调中，returnVlaue的值将用于确定哪个按钮用于触发close事件。

　　5. 其他

　　dialog之前的一些性能已经包含在描述中，可能不完整，不准确，或者随着时间的推移，可能会有更新的功能。欢迎补充。

　　在看前面的例子时，我们也看到了一些不足，比如：风格特别丑。在这方面，我们完全可以使用CSS来重置样式，而不影响语义，以及其他任何东西。你可以随意重构它。

　　这里只想说一下dialog的性能，就不做这个了。

　　6. 总结

　　对话框毕竟属于弹出对话的语义标签，有一些独特的优势(比如webview层级的高度)。虽然现在只支持chrome，但是对于未来的使用还是很有前景的。即使是现在，你也能和自己兼容。在其他浏览器中，你可以自己实现一套对话框机制(可能你已经有这个实现方案了，这里就不找了)。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。