I hate using modal dialog when the new content could be easily nested in the same page. I just don’t like the user experience of a popup. Why limit yourself to a small box when you can show it in the full-blown layout?
However, sometimes clients insist on a modal in their design and we have to deal with it. In this blog post I will show you how to make the modal dialog a little bit better – give it its own URL.
Lack of own URL is the pain point of many modal dialog implementations. Imagine that you have a list of articles and when a user clicks “edit” the form is rendered in the modal dialog, covering the list. One day the form stops working and the user submits a bug report with the URL of the page. What is the URL in the bug report? Of course, it’s the URL of the list, because showing the modal does not change the current URL. Happy debugging!
In fact, the situation doesn’t have to be related to bugs at all. It’s also true for any other case when user would like to share a link to a specific page. Take the next example: reloading the page. User reloads the page and the modal dialog is gone.
When I learned that routable modal dialog can be easily implemented in Ember.js I was very happy, because the above issues are important for me. I’ve never implemented similar solution while working with modal dialogs in AngularJS, but in fact I never really searched for it. If you have an example please share it in the comments!
The workhorse of this example is going to be Ember Modal Dialog. This is a wonderful addon which in fact does the job for us. In this example I’m going to use Ember CLI 1.13.8, Ember 2.1.0 and Ember Modal Dialog 0.8.1.
Let’s start with creating the new application:
and change version of Ember to 2.1.0. We can also remove Ember Data, because we will mock data with static objects and ember-data-fixture-adapter is no longer maintained.
As the next step, install
ember-lodash. Then add code which renders a simple list of posts, with nested
1 2 3 4 5 6 7 8 9 10 11 12 13 14
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9 10 11 12
We also have to implement this
PostRepository service. Here it is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Now it’s time to replace the nested post view with a modal dialog.
Start by installing
ember-cli-sass as described in the README:
and replace empty
app/styles/app.css with following
Next, we have to modify
app/templates/posts/show.hbs to wrap its content with
1 2 3
And as a final step let’s define
goBackToList action which handles clicks outside of the modal dialog:
1 2 3 4 5 6 7 8 9 10