Discourse 3.1.0.beta6 附带了一个全新的 DModal 基于组件的 API。
这取代了旧的基于控制器的 API，后者现已弃用。如果您的现有模态框使用了旧的 API，请参阅此处的迁移指南。
渲染模态框
通过在 handlebars 模板中包含 DModal 组件来渲染模态框。如果您还没有合适的模板，请查看 https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727。
一个简单的模态框看起来像这样：
<DButton
@translatedLabel="显示模态框"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<DModal @title="我的模态框" @closeModal={{fn (mut this.modalIsVisible) false}}>
你好世界，这是模态框中的一些内容
</DModal>
{{/if}}
mut助手在这里用作仅限 hbs 的方式来设置值。您也可以使用任何其他标准的 Ember 方法来设置modalIsVisible。
此示例将创建一个简单的模态框，如下所示：
封装到组件中
在引入更多复杂性之前，通常最好将新的模态框封装到其自己的组件定义中。让我们将 DModal 内容移动到一个新的 <MyModal /> 组件中
{{! components/my-modal.hbs }}
<DModal @title="我的模态框" @closeModal={{@closeModal}}>
Hello world, this is some content in a modal
</DModal>
引入一个伴随的 .js 组件文件将允许您引入更复杂的逻辑和状态。
要使用新组件，请更新调用站点以引用它，确保传入 @closeModal 参数。
<DButton
@translatedLabel="显示模态框"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}
添加页脚
许多模态框都有某种“行动号召”。在 Discourse 中，这些通常位于模态框的底部。为了实现这一点，DModal 有许多“命名块”，可以在其中渲染内容。这是更新后的示例，包括页脚中的两个按钮，其中一个是我们的标准 DModalCancel 按钮
<DModal @title="我的模态框" @closeModal={{@closeModal}}>
<:body>
Hello world, this is some content in a modal
</:body>
<:footer>
<DButton class="btn-primary" @translatedLabel="提交" />
<DModalCancel @close={{@closeModal}} />
</:footer>
</DModal>
从非 hbs 上下文渲染模态框
理想情况下，DModal 实例应该使用上面演示的声明性技术从 Ember handlebars 模板中渲染。如果这不适用于您的情况（例如，您需要从 Discourse 的旧版“raw-hbs”或“widget”渲染系统中触发模态框），则可以通过注入 modal 服务并调用 modal.show() 来实现。
确保如上所述将模态框封装到自己的组件中。然后，通过将组件类的引用传递给 showModal 来触发模态框：
import MyModal from "discourse/components/my-modal";
// (在相关位置注入 modal 服务)
// 每当你想打开模态框时，添加此调用。
// 一个 `@closeModal` 参数将自动传递给你的组件。
this.modal.show(MyModal);
// 可选地，传递一个 '`model`' 参数。作为 `@model` 传递给你的组件。
// 这可以包括数据，以及供你的模态框使用的操作/回调。
this.modal.show(MyModal, {
model: { topic: this.topic, someAction: this.someAction },
});
// `modal.show()` 返回一个 promise，因此你可以等待它关闭
// 它将以传递给 `@closeModal` 操作的数据解析
const result = await this.modal.show(MyModal);
更多可定制性！
DModal 有许多命名块和参数。请查看交互式风格指南了解参数，并查看d-modal 模板实现了解命名块。
本文档是版本控制的 - 在 github 上建议更改。