对话框 / Dialog Star

Dialog 窗口

普通窗口

会自毁的窗口

带按钮的窗口

通过我们提供buttons参数. 通过这个参数, 可以很方便地添加脚注中的按钮

还可以通过设定footer的值, 来构建自定义脚注, 自行添加按钮

这里可以给Dialog中任意的DOM元素添加data-action属性。在用户点击了一个带有data-action的元素时,Dialog会根据data-action所指定的动作来释放事件。比如上边例子里,我们给脚注中的按钮添加了close的动作标识。Dialog中有一个默认的动作处理动作close。所有带有 close动作标识的元素,被点击之后,Dialog都会自动关闭哟。

注意: footerbuttons的优先级. 如果, footerbuttons同时存在, 那么footer会覆盖buttons.

是不是觉得自己拼按钮很麻烦呢? 来, 我们内置一些常用的带按钮的窗口~

内置的窗口们

内置的窗口们的特性

  1. 对于警告窗口和确认窗口,它们属于用户必须响应的交互,而且这种响应一定有固定的结果。因此,我们把它们的返回结果进行了 Promise封装。也就是说,Dialog.alert()Dialog.confirm()会返回promise. 即这两个操作是异步的, 会返回预期结果. 用户只能在我们限定的选项中做出一个选择. 当promiseresolvedrejected, 会带有按钮的标识part.

  2. 都是没有关闭按钮的. 原因是关闭按钮在这里是多余的. 关闭按钮在alert中表达的确认, 与确认按钮一致; 在confirm中表达的意图是取消, 与取消按钮一致. 因此, 关闭按钮是重复的, 不展现这个按钮. 这也与window.alert()window.confirm()的交互相一致.

  3. 都是会自毁的. 这与window.alert()和window.confirm()是一致的.

  4. Dialog.alert()产生的窗口带有样式类.skin-alert-dialog, 也可以添加其他的skin来丰富样式效果.

  5. Dialog.confirm()产生的窗口带有样式类.skin-confirm-dialog, 也可以添加其他的skin来丰富样式效果.

  6. 点击mask不会关闭窗口, 原因与2一致.

警告窗口 Dialog.alert()

确认窗口 Dialog.confirm()