如你所见，dialog标签可以是一个模态窗口（Modal Dialog）。模态窗口在保留主界面显示的同时禁用主界面的用户交互，子界面交互完毕返回正常的主界面。本文模拟的模态窗口是一个登录窗口，只是模拟，不做任何事情，但从中应该可以感受到dialog标签的强大——在H5以前，做这样的模态窗口是个繁重且繁琐的事情，而现在简单到令人难以置信：

dialog标签默认不显示，需要通过 元素.showModal() 激活它。所以上面的示例代码设置了一个按钮用于激活dialog模态窗口，dialog标签内也加入一个按钮，点击该按钮会触发 元素.close() 事件，dialog窗口会自动关闭。上述代码可以在线预览效果，效果中因为是在预览页面中演示，预览页面的关闭按钮层级设置得很高，其交互功能不受到dialog窗口的影响。

dialog模态窗口集成快捷键关闭功能，按Esc键可关闭该窗口。所以，模态窗口中即使不设置关闭按钮，一样可以关闭它，提供交互按钮可以提升人机对话的友好性。

dialog窗口还能以非模态窗口方式渲染，有两种实现方法：其一，使用html属性 open 令其一开始就自动激活；其二，使用 元素.show() 方法。以下代码演示的是第二种方法：

非模态窗口就是普通的弹窗，它不屏蔽主窗口的交互。上例中，窗口弹出后主界面上的测试按钮依然可以正常工作。例中的JS代码不是dialog弹窗必须的，这里加入它目的有二：一是演示 dialog 标签的 close 监听事件，可以通过监听窗口的关闭事件做需要做的事情，例如例中的停止音乐。dialog 还有一个 cancel 事件可以监听。

显然，dialog标签简化了弹窗的操作，使用者甚至可以不依赖过多的JS编程就可以实现一些高级功能，非常实用。