# Modal defined on route (should be usable using {{#link-to}} )

**URL:** <https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517>\
**Category:** Proposals\
**Created:** [December 5, 2013, 12:52am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517 "2013-12-05T00:52:03Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hashg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hashg/32/14399_2.png) [@hashg](https://discuss.emberjs.com/u/hashg)\
**Post date:** [December 5, 2013, 12:52am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/1 "2013-12-05T00:52:03Z")

</div>

I tried most of the modal techniques discussed previously here. I want modal to appear when I transition to a route. So when I use {{#link-to}} for that particular route it should display it on modal and should return back to previous route on close.

Can this be done? Is there a jsbin - I can refer to?

---

<div class="post-metadata">

**Author:** ![jonnii](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jonnii/32/14279_2.png) [@jonnii](https://discuss.emberjs.com/u/jonnii)\
**Post date:** [December 5, 2013, 2:50am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/2 "2013-12-05T02:50:15Z")

</div>

what’s your use case exactly?

---

<div class="post-metadata">

**Author:** ![hashg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hashg/32/14399_2.png) [@hashg](https://discuss.emberjs.com/u/hashg)\
**Post date:** [December 5, 2013, 3:05am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/3 "2013-12-05T03:05:32Z")

</div>

I want to enable login whenever user tries to edit/delete a record if not logged in. I’m using this library([GitHub - simplabs/ember-simple-auth: A library for implementing authentication/authorization in Ember.js applications.](https://github.com/simplabs/ember-simple-auth)) where routes created with auth mixin `Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin, {});` will redirect to login route.

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [December 5, 2013, 4:59am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/4 "2013-12-05T04:59:14Z")

</div>

Perhaps, I’m not fully understanding but it sounds like all you need is a nested route within a resource.

```auto
this.resource('foo', { path: 'foo'}, function () {
      this.route('modal');
});

```

You’d have an unnamed {{outlet}} on the FooIndex template and just add some CSS styling to position the ModalView.

I can JSfiddle it if want you want is when you go to `/foo/modal` it opens a modal window on top of `/foo`

---

<div class="post-metadata">

**Author:** ![hashg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hashg/32/14399_2.png) [@hashg](https://discuss.emberjs.com/u/hashg)\
**Post date:** [December 5, 2013, 11:22pm UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/5 "2013-12-05T23:22:42Z")

</div>

@jasonmit Yup. that is wat I’m looking for. JSBIN will be really very helpful (preferably twitter boostrap modal). Thanks in advance.

---

<div class="post-metadata">

**Author:** ![hind3nbug](https://avatars.discourse-cdn.com/v4/letter/h/6de8d8/32.png) [@hind3nbug](https://discuss.emberjs.com/u/hind3nbug)\
**Post date:** [December 6, 2013, 2:49pm UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/6 "2013-12-06T14:49:33Z")

</div>

I’ve been working on something somewhat similar. It’s a route-based implementation using Bootstrap modals. Here’s a [JS Bin](http://jsbin.com/ELiWOHuk/7/).

Disclaimer: I’m new to Ember, so I’m still learning “best-practices.” Feedback is always welcome.

---

<div class="post-metadata">

**Author:** ![MiguelMadero](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/miguelmadero/32/15187_2.png) [@MiguelMadero](https://discuss.emberjs.com/u/MiguelMadero)\
**Post date:** [December 11, 2013, 5:59pm UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/7 "2013-12-11T17:59:10Z")

</div>

I have it as a view. IMO the route shouldn’t know anything as to how a view is displayed, but we could still re-use it form multiple places.

Directly from a view

```
<div> Some markup</div>
{{#modal-view}}
some content
{{/modal-view}}

```

Have a view that inherits from it so it gets `modal` behavior. Then your route simply renders listEditView as usual, but it will show up as a modal.

```
App.ListsEditView = App.ModalView.extend()

```

No need for outlet since all the magic is done via CSS, but we could use them.

The ModalView code is simple:

```
    ModalView = Ember.View.extend {
  actions:
    close: ->
      view = @
      @$('.modal').one "transitionend", ->
        view.controller.send('close')
      @$('.modal, .modal-backdrop').removeClass('in')
  didInsertElement: ->
    view = @
    @$('.modal, .modal-backdrop').addClass('in')
    @$('.modal-backdrop').on 'click', ->
      view.send 'close'
  layoutName: 'modal_layout'
}

App.ModalView = ModalView

```

The layout is simple as well

```
.modal-backdrop.fade &nbsp;
.modal.fade
  div class=loading
    = yield

```

Then your view (list Edit View), simply defines content within some divs used by bootstrap

```
.modal-header
  button.close click="close target=view" type="button" &times;
  h3 Modify List

.modal-body
  = partial 'lists/form'
  p.small.faded Created {{time datetime=created_at}}
  p.small.faded Last modified {{time datetime=updated_at}}

.modal-footer
  input.btn click="close target=view" type="button" value="Close" disabled=loading
  input.btn.pull-left click=delete type="button" value="Delete list" disabled=loading
  input.btn.btn-primary click=save type="button" value="Save List" disabled=loading

```

I considered adding a `header` and `footer` property to the modal-view, that worked fine, so the divs and close button were always defined in the layout, however, I found that I was frequently overriding those sections with more complex content so I moved the responsibility to actual view as shown above.

Then in your controller, you need to implement a `close` and a `done` action. The first is an opportunity to do something when we’re closing the modal (e.g. cancel the current action). `done` simply returns to the previous route. Since this is a common task, we have a mixin with those two. Also in the hook we store the `currentPath` before navigating so we know how to go back.

```
ModalMixin = Ember.Mixin.create {
  actions: {
    done: ->
      @router.transitionTo @get('returnTo')
    close: ->
      @done() # usually overriden when mixed to cancel/rollback changes
  }

  beforeModel: ->
    @set 'returnTo', @controllerFor('application').get('currentPath')
}

App.ModalRouteMixin = ModalRouteMixin

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![hashg](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hashg/32/14399_2.png) [@hashg](https://discuss.emberjs.com/u/hashg)\
**Post date:** [December 11, 2013, 7:46pm UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/8 "2013-12-11T19:46:24Z")

</div>

@MiguelMadero Thanks. Sample code looks good, I will try putting it into my app and see if it fits the bill. My only issue with other modal implementation was I was unable to bind communicate after I performed some action in my controller.

Example: I hit “save” on the modal window. It triggers controller/actions/save. Now if the save is successfull, close the modal or display error on modal. How do I do that?

---

<div class="post-metadata">

**Author:** ![SamvelRaja](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@SamvelRaja](https://discuss.emberjs.com/u/SamvelRaja)\
**Post date:** [January 22, 2014, 5:36am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/9 "2014-01-22T05:36:00Z")

</div>

Hi the JSBin looks good but can anyone tried clicking the back button??? its showing up the modal again. is that the best practice. I am looking for similar kind of solution where when a modal is in display the back button should either be disabled so that the parent view could not be changed while displaying the modal or else when the back button is pressed the modal need to be closed. I am ver new to ember and i struck in this.

---

<div class="post-metadata">

**Author:** ![bob\_ludvigsen](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bob\_ludvigsen](https://discuss.emberjs.com/u/bob_ludvigsen)\
**Post date:** [February 27, 2014, 9:04am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/10 "2014-02-27T09:04:50Z")

</div>

@hind3nbug Do you have any idea why there is no slide animation on the modal on enter and exit?

I´ve tried to animate but so far without any luck.

Thanks

---

<div class="post-metadata">

**Author:** ![SamvelRaja](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@SamvelRaja](https://discuss.emberjs.com/u/SamvelRaja)\
**Post date:** [July 2, 2014, 11:11am UTC](https://discuss.emberjs.com/t/modal-defined-on-route-should-be-usable-using-link-to/3517/11 "2014-07-02T11:11:16Z")

</div>

@bob_ludvigsen It is possible via css for sure. just google it