dialog 标签

如何使用Dialog标签

最近几年弹窗和模块对话框（一般来说，Windows应用程序中，对话框分为模态对话框和非模态对话框两种。二者的区别在于当对话框打开时，是否允许用户进行其他对象的操作）已经越来越流行了。如果我们用html5的dialog标签的话我们能够在不需要引用任何javascript插件的情况下快速创建弹窗和模块对话框，只需要简单的html和原生javascript就行。

因为这个特性比较新，而且只支持chrome浏览器，你需要在http：//flags#enbale- experiment-web-platform 启用就行了。

好在这里https://github.com/GoogleChrome/dialog-polyfill 已经解决了老浏览器兼容问题。

创建一个弹窗

这个元素可以轻松的创建一个符合你心意的弹窗。Html结构如下

<dialog id="dialog">

<p>Hello World</p>

 <button id="close">Close</button>

</dialog>

这几行代码已经很明显了，如果你把它加入txt，然后用浏览器打开，你是看不到一个弹窗的，因为你还没有调用它啊。调用方式如下：

var dialog = document.getElementById('dialog');

dialog.show();

现在你刷新页面就可以看到弹窗了。但是通常我们是希望用户点击才看到弹窗，所以你需要在你的html加入一个button。

<button id="launch">Launch me</button>

现在在我们javascript里只需要对这个按钮加入一个点击事件。

var dialog = document.getElementById('dialog');

$('#launch').click(function() {

   dialog.show();

});

然后我们需要给这个弹窗加一个关闭事件。我们已经有一个关闭按钮了。所以只需要加如下方法：

$('#close').click(function() {

    var close = document.getElementById('close');

    dialog.close();

});

现在我们用简单的html和javascript搭建起一个弹窗了。

你可能已经注意到在对dialog选取的时候我没有用jquery，而是用的原生的javascript。因为jquery也有个show方法，我怕这个两个冲突。

创造一个模块对话框

模块对话框和弹窗很像，不同的是模块对话框弹出的时候不允许用户点击页面的其他的地方除了它自己。

创建一个模块对话框的html如下:

<button id="launch-modal">Launch Modal</button>

<dialog id="modal">

  <p>You can not click anything else</p>

  <button id="close-modal">Close</button>

</dialog>

你已经看到了我只是改变了文字和id 就把一个弹窗变成了模块对话框。在javascript代码也是很相似的，我们只需要改变我们调用的方法而已showModal。代码如下：

var modal = document.getElementById('modal');

$('#launch-modal').click(function() {

modal.showModal();

});

$('#close-modal').click(function() {

var close = document.getElementById('close-modal');

modal.close();

});

你测试的时候你会发现除了对话框其他地方你都无法点击。

你可以看看我写的一个demo http://codepen.io/SaraVieira/pen/eHqAd

Css就是你可以根据自己的喜好去添加。但是当你用模块对话框的时候这里有一个backdrop。就是一个在模块对话框下面的一个背景，你能通过下的css去改变你的背景颜色。让用户不能看到页面其他元素当模块对话框弹出的时候。

dialog::backdrop {

background: rgba(0,0,0,0.9);

}

这就让你可以自定义自己的背景了。

结论

这个标签不适合我们马上在项目中使用。但是以后我们可能用到，因为这使开发者更简单了。

因为不引用其他的插件，这样也能加快页面的加载速度。