Ember.js Modal Dialog renders invisibly

Question

I am working on an Ember.js application where I plan to make heavy use of Modal Dialogs. I have been following this guide: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

I'm using the following libraries: (output from console)

"DEBUG: -------------------------------"

"DEBUG: Ember : 1.7.0"

"DEBUG: Ember Data : 1.0.0-beta.11"

"DEBUG: Handlebars : 1.3.0"

"DEBUG: jQuery : 1.11.1"

"DEBUG: -------------------------------"

My problem is that when I press a button which should open a modal dialog, I see nothing on the screen. I can find the rendered HTML in an inspector, but it doesn't show up anywhere a user can see it. As I'm not quite sure how this HTML is supposed to appear in the first place, since this isn't explained anywhere, I can't figure out what is wrong.

The HTML appears to be rendered correctly. I just wish it would pop up on my screen! :)

Relevant code in handlebar:

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

The Controller (Route):

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  },
  actions: {
    openModal: function(modalName, model) {
      console.log("usersroute.actions.openmodal("+modalName+", "+model+")")
      this.controllerFor(modalName).set("model", model);
      return this.render(modalName, {
        into: "application",
        outlet: "modal"
      });
    },
    closeModal: function() {
      return this.disconnectOutlet({
        outlet: "modal",
        parentView: "application"
      });
    }
  }
});

The console logs as intended:

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

Copied from inspector, showing the div with id #modal: (sorry for indentation mess)

<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>[email protected]<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="[email protected]" 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>

But as I said, it doesn't actually make anything show up on the screen. And I'm not sure why it would in the first place, I just followed the example given in the documentation. There doesn't seem to be any mention of how to make things appear on the screen there.

If anyone out there can shed some light on what is going wrong, and how I can fix it, it would be greatly appreciated.

Sam Selikoff Sam Selikoff · Accepted Answer · 2014-11-20T15:54:33

Did you get the relevant CSS from the JSBin example? If the HTML is rendering but you can't see it, it may be because you haven't styled the modal window:

.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;
}

Ember.js Modal Dialog renders invisibly

1 Answers