html dialog,javascript dialog

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

　　对话框的组成

　　常见的弹出框表单：

　　位置：左上角、右上角、左下角、右下角、垂直居中等。

　　尺寸：定宽定高，定宽定高，定宽定高等。

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

　　但是有一种情况(宽度和高度可变的垂直居中)不太容易实现(可以使用translate或者flex of display:table或者css3)。详情请参考水平和垂直居中布局。

　　上面的对话框包含内容容器，另一个是对话框下面的蒙版层。mask层是用户触发弹出框后形成的对话框和页面体之间的一个分割层。它的存在可以给用户更明显的视觉效果，同时可以避免用户触发对话框后其他不必要的页体操作，带来更多的用户体验。

　　存在问题

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

　　选择哪个对话框(有选择综合症的人很头疼)易用性(api的简单性，是否依赖其他第三方库)扩展性浏览器兼容性支持那么，有没有简单的制作对话框的方法？当然，我们可以使用HTML5的对话框元素。

　　HTML5(对话框)

　　对话框打开H2你好世界。/H2/对话框非常简单。我们可以制作一个弹出内容为“Hello World”的对话框通过使用上面的代码。

　　控制对话框的显示/隐藏也很容易。添加open属性以显示它，删除它以隐藏它。当然，我们也可以通过DOM接口控制对话框的show()、close()。

　　在下面对话框的mask层，我们可以使用：backgrop伪元素，对于它的激活，我们需要使用showModal()的API，即DOM。backgrop的特点是它的位置在对话框的下面，任何z索引的上面。

　　使用showModal()不仅可以显示遮罩层，还可以显示对话框容器，所以在使用：background时，可以使用showModal()代替show()作为API；如果按下键盘ESC键，弹出层将被关闭。当然，你可以尽快使用DOM API close()。

　　我们可以设置：background这个图层是半透明的，代码如下：

　　dialog:background { background-color:rgba(0，0，0，0.75)；}除了我们常见的提示信息弹出层之外，还有另一种弹出层，它带有用于比较的表单。

　　带表单的弹出层

　　我们可以使用HTML5的对话框元素结合表单元素来制作这些弹出层吗？

　　答：是的。

　　怎样才能让表单元素和对话框元素紧密结合？

　　答：我们只需要在对话框元素中添加属性method=dialog ，这样按钮元素的属性值的值就可以传递给对话框元素了。

　　Dialogform method= dialog pOK或cancel/p button type= submit value= yes OK/button button type= submit value= no cancel/button/form/dialog script var dialog=document . query selector( dialog )dialog . show modal()dialog . addevent listener( close ，function(event){ console . log(dialog . return value)})/script demo

　　浏览器兼容性

　　虽然这是一个易于使用的HTML5，但仍然存在兼容性问题。chrome和opera对它的支持更好。Firefox是一个实验性的功能，但是IE，Edge，safari都不太支持。ios不支持，Android支持的也不够好。仅次于Android6。详见caniuse。

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

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

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