w3ctech

从Chrome 37开始,支持dialog标签

从Chrome 37开始,支持dialog标签啦! 我在Chrome canary38.0.2119.0下,直接在w3ctech网站上,使用开发者工具进行测试,效果如下:

dialog标签效果

代码如下:

<dialog>
  <p>This is da dialog!</p>
  <button id="close">Close</button>
</dialog>
<button id="show">Open Dialog!</button>
<script>
  var dialog = document.querySelector('dialog');
  document.querySelector('#show').onclick = function() {
    dialog.show();
  };
  document.querySelector('#close').onclick = function() {
    dialog.close();
  };
</script>

从以上代码和效果可以看出,dialog除了有默认的样式外(作为HTML元素,当然我们也可以为他增加自定义样式),同时在JS API上,支持show和close方法。

这样一来,就让我们以后的开发工作更简单了。

w3ctech微信

扫码关注w3ctech微信公众号

共收到2条回复

  • chrome在很多方面都进行实验性的创新实践,蛋疼的是,可能在下一个版本他就会取消支持某个特性。所以很多东西要慎用,尤其是这种浏览器本身很容易实现,他又额外添加的功能。

    回复此楼
  • @barretlee 这个还好吧,这个是属于W3C规范中有提到的。

    回复此楼