Creating a Lightbox Route in Ember.js -

my authentication system uses lightboxes, when user clicks "sign in" or "sign up", lightbox pops them input credentials. page on remains rendered behind lightbox, , when they're done signing in, lightbox disappears , view returns way was. can work when deviate conventional ember route flow using lot of jquery, i'd prefer integrate more tightly rest of ember app.

the problem is, conventional ember route flow expects views , templates handled in particular way. specifically, route such /sign-in render sign-in template within application template, erasing whatever there before. since want preserve view there before, approach doesn't work.

is there way tell ember view not erase current view, instead render independent view such lightbox?

you can use named outlets , render template outlet, in aplication template has outlet called modal, , 2 actions in applicationroute, openmodal , closemodal. open 1 receives template name , uses route method render set outlet content, close 1 renders empty template.

app.applicationroute = ember.route.extend({     actions: {         openmodal: function(modal) {             this.render(modal, {into:'application', outlet: 'modal'});         },         closemodal: function() {             this.render('empty', {into: 'application', outlet: 'modal'});         },     } }); 

html handelbars

<script type="text/x-handlebars" data-template-name="application"> {{! other application template code}} <button {{action openmodal 'hellow.modal'}}>open it!</button> {{outlet modal}}  </script> <script type="text/x-handlebars" data-template-name="empty"></script> <script type="text/x-handlebars" data-template-name="hellow/modal"> <div class="modal">     <div class="modal-header">       hellow     </div>     <div class="modal-footer">       <button {{action closemodal}}>close</button>     </div> </div> </script> 

this adapted http://nerdyworm.com/blog/2013/04/20/ember-modal-example/