前言
在前端开发中，弹窗是一个常见的功能，但是不同的项目中实现弹窗的方式可能有很大的区别。在 Ember.js 框架中，提供了一种轻便、易用的插件 - ember-semantic-proper-modals，该插件通过使用语义化标签来构建弹窗窗口，不仅可以实现弹窗功能，还能更好地组织和管理代码，提高开发效率。
本文将为大家介绍如何使用 ember-semantic-proper-modals 插件，并针对该插件的各项功能进行详细的分析和解释，帮助读者更好地理解插件的使用方法和内核。
安装和使用
安装
安装 ember-semantic-proper-modals 非常简单，只需要在项目中执行以下命令即可:
ember install ember-semantic-proper-modals
使用
安装完成后，可以通过如下方式开启弹窗窗口并显示内容：
// 在模板文件中 {{#proper-modal onOk=(action "okClick") on-cancel=(action "cancelClick")}} <h3>这是标题</h3> <p>这是内容</p> {{/proper-modal}}
此外，在弹窗窗口打开的同时，您还可以监听到四种事件：
- 通过
onOk监听点击“确认”按钮事件； - 通过
onCancel监听点击“取消”按钮事件； - 通过
on-success监听窗口成功打开事件； - 通过
on-failure监听窗口打开失败事件。
结构和实现
结构
ember-semantic-proper-modals 的模板文件共有 3 个部分分别是：ModalHeader、ModalBody 和 ModalFooter。
ModalHeader 用于显示弹窗窗口的标题（一般为 h4 标签），ModalBody 用于显示弹窗窗口的内容（可以为任何标签或代码片段），ModalFooter 用于显示弹窗窗口的底部按钮（一般为“确认”和“取消”两个按钮）。
实现
弹窗的具体实现原理是，当 proper-modal 被调用时，底层实现将开辟一个新的容器 proper-modal-container 将您设置的内容插入容器中后再将其渲染出来（由于容器是一个独立的视图渲染对象，因此可以实现多重弹窗同时打开）。
当需要关闭弹窗时，可以调用如下代码：
this.sendAction('onCancel');
其中，onCancel 为点击“取消”按钮触发的监听事件。如果需要关闭窗口，则需要在监听事件中添加相应逻辑。
示例代码
效果图：
模板文件：
-- -------------------- ---- ------- --------------- ----------------- -------------- ------------- ------------ ----------- ------- ------- ---- ------------- --------------------- ----- ---- ------------ ------------ ----- ---- ------------- ---------- ----------- --------------------------- ----- -------- -------- -----------------展开代码
控制器中的事件：
-- -------------------- ---- ------- ------ ------- ------------------- -------- - --------- - -- ---------- -- ------------- - -- ---------- - - --展开代码
总结
本文为大家介绍了如何使用 ember-semantic-proper-modals 插件，并对该插件的实现原理和功能进行了详解，希望读者在掌握使用方法的同时也能对插件的内部机制有一定的了解，为开发提供参考和指导。
在实际开发中，由于弹窗是前端开发中常见的功能，因此开发者需要熟练掌握它的实现方法和使用技巧。最后，希望大家通过本文的学习和实践，能在前端开发的路上越走越稳。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737e81e8991b448e9716
