Ember.js模态对话框以不可见方式渲染

我正在开发一个Ember.js应用程序，计划大量使用模态对话框。 我一直遵循这一指南：

我正在使用以下库：（从控制台输出）

“调试：------------------------------------”

“调试：余烬：1.7.0”

“调试：余烬数据：1.0.0-beta.11”

“调试：把手：1.3.0”

“调试：jQuery:1.11.1”

“调试：------------------------------------”

我的问题是，当我按下一个应该打开一个模式对话框的按钮时，我在屏幕上什么也看不到。我可以在检查器中找到呈现的HTML，但它不会显示在用户可以看到的任何地方。由于我不太确定这个HTML最初应该是如何出现的，因为没有任何地方对此进行解释，所以我无法找出错误所在

HTML似乎已正确呈现。我只希望它能出现在我的屏幕上！：）

把手上的相关代码：

<div id="modal">
     {{outlet modal}}
</div>

控制台按预期记录：

"usersroute.actions.openmodal(userModal, <App.User:ember578:4>)"

“usersroute.actions.openmodal（userModal，）”

复制自inspector，显示id为#modal的div：（抱歉缩进混乱）

×闭合
用户：andreas@kodeworks.no
名称
位置
电子邮件
名称
取消
删除用户
保存更改

但正如我所说，它实际上并没有让任何东西出现在屏幕上。我不知道为什么会这样，首先，我只是按照文档中给出的例子。那里似乎没有提到如何让东西出现在屏幕上

---

如果有人能告诉我出了什么问题，以及我如何解决它，我将不胜感激。

您是否从JSBin示例中获得了相关的CSS？如果HTML正在呈现，但您无法看到它，可能是因为您尚未设置模式窗口的样式：

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.modal {
  position: relative;
  margin: 10px auto;
  width: 300px;
  background-color: #fff;
  padding: 1em;
}

---

谢谢你的提示！查看css是朝着正确方向迈出的一大步P

<div id="modal">
        <script id="metamorph-15-start" type="text/x-placeholder"></script><script id="metamorph-16-start" type="text/x-placeholder"></script>
<div id="ember603" class="ember-view">
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">User: <script id="metamorph-17-start" type="text/x-placeholder"></script>andreas@kodeworks.no<script id="metamorph-17-end" type="text/x-placeholder"></script></h4>
</div>
<div class="modal-body">
    <form role="form">
        <div class="form-group">
            <script id="metamorph-18-start" type="text/x-placeholder"></script>
                <label for="name">Name</label>
                <input id="ember612" class="ember-view ember-text-field form-control" required="true" value="Andreas L Johnsen" type="text">
                <label for="position">Position</label>
                <input id="ember613" class="ember-view ember-text-field form-control" required="true" type="text">
                <label for="email">E-mail</label>
                <input id="ember614" class="ember-view ember-text-field form-control" required="true" value="andreas@kodeworks.no" type="text">
                <label for="name">Name</label>
                <input id="ember615" class="ember-view ember-text-field form-control" required="true" value="Andreas L Johnsen" type="text">
            <script id="metamorph-18-end" type="text/x-placeholder"></script>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <script id="metamorph-19-start" type="text/x-placeholder"></script>
        <button type="button" id="delete" class="btn btn-danger" data-dismiss="modal" data-ember-action="617">Delete user</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-ember-action="618">Save changes</button>
    <script id="metamorph-19-end" type="text/x-placeholder"></script>
</div>

        </div>
    </div>
</div>
</div>
<script id="metamorph-16-end" type="text/x-placeholder"></script><script id="metamorph-15-end" type="text/x-placeholder"></script>
    </div>

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.modal {
  position: relative;
  margin: 10px auto;
  width: 300px;
  background-color: #fff;
  padding: 1em;
}