A modal dialog box is a common UI pattern. The ember-modal-dialog addon makes creating that pattern easy!
In this video we learn how to install the addon, create modals both in specific controllers and in the application route, and apply different configurations and styles to make it look how we want.
Links
Code
//in demonstrations/actions/controller.js
actions: {
howToRemoveHat(){
this.send('showModalDialog', 'we realize it is difficult to remove our proprietary vicelok hats')
}
}
//in application/route.js
export default Ember.Route.extend({
actions: {
closeModalDialog(){
this.controllerFor('application').set('isShowingModal', false)
},
showModalDialog(message){
this.controllerFor('application').set('modalMessage', message)
this.controllerFor('application').set('isShowingModal', true)
}
}
})
//applications/template.hbs
//...
{{#if isShowingModal}}
{{#modal-dialog translucentOverlay=true close='closeModalDialog'}}
{{modalMessage}}
{{/modal-dialog}}
{{/if}}
Transcript
Hi, and welcome back to Ember Screencasts. Today we’ll be covering the ember-modal-dialog
add-on. I’m covering this add-on for three reasons. First and most important to anyone watching in the future, is because it’s an awesome add-on that lets you easily implement a common feature. Second, is because that feature works well with the action sequence that we’ve been doing, and we can make it replace the alert boxes. Third, because it’s delaying a tactic that lets me have an extra week to properly figure out closure actions, because those are a big change. I want to make sure I get it right for you guys.
So currently when we’re wanting to send a message to the user, we use an alert box.
But that’s ugly. We want something better. That’s where the ember-modal-dialog
add-on comes in. It allows us to easily create beautiful modals. Let’s get started.
First, we’ll install the ember-modal-dialog
add-on. Then, we’ll install the ember-cli-sass
add-on, since it relies on it.
Then we’ll copy these two lines, we’ll change our app.css
to app.scss
,
so we’re using sass now, and then we’ll paste these two lines in there. So we’re importing the styles from the add-on.
Then, in our actions template, we’ll put in a modal-dialog
box.
So when we restart the server and reload the page, we get this modal-dialog
box.
Now you’ll notice that this modal is missing some of the features that you might normally expect from a modal. For example, greying out the rest of the screen, and being able to close it. So let’s add those in.
If we go to the read me for the add-on, we see that there is some configurable properties, one of which is translucentOverlay
.
So we’ll set that to true
.
Now it grays out the rest of the screen, like we would expect.
We would also expect the modal-dialog
to be a little bit larger. So what we’ll do is we’ll find the class there, ember-modal-dialog
,
and then we’ll increase the size through css
.
There, we have a nice, larger ember-modal-dialog
.
Now we use the ember-modal-dialog' css
, and here we have the modal overlays and the ember-modal-overlay
.
If you want to add different classes, you can use overlay-class
and overlayClassNames
and container-class
and containerClassNames
,
and you can use those to add different class names to different modals, if you’re using multiple modals and you want to style them differently.
So now our modal is looking nice, but we can’t close it, and we want to be able to do that. So we’ll do that by putting an action on the close
property.
So we’ll have the close
property, and we’ll attach this to the closeModalDialog
action. As we’ll see in this week’s pro-video, this is how we attach actions to components.
So to make our close
action mean something, we’ll first wrap this modal-dialog
in an if
statement, so it only shows up if the isShowingModal
Boolean is true
.
In controller, we’ll temporarily set the isShowingModal
default to true
, and then we’ll create the closeModalDialog
action. In this action, we will set the isShowingModal
property to false
,
and we’ll see that when we click outside, it closes that modal dialog.
So now we’ll need a way to open up that modal-dialog
box. We’ll start by putting the default of isShowing dialog
as false
, so that it will start from where we want to be normally. And then we’ll create an action called showModalDialog
. This action will take a parameter, and then that parameter will be set to the modalMessage
property. And then, we’ll set the isShowingModal
to true
.
Now that modalMessage
property, we’ll be having that in the middle of the modal-dialog
, and that’s going to replace the "thank you for using hats".
And how we’ll use this is by taking the places where we’re showing an alert, and we’ll replace that with showModalDialog
.
So then when we try to trigger that, it will show our modal dialog instead of an alert.
So this is great. We have our modal dialog, it’s showing when you click something, and it’s disappearing when you click away. But our other things are still alerts, and the way we have this set up, it’ll be difficult to make them not alerts, because those alerts are called in the route.
So what we need to do is take all this and move it up the action bubbling chain.
We could move it to the route, however, let’s keep on bubbling up until we get to the application route.
So we’ve taken out these two actions from the controller, then we’ll take this from the template
and paste it into the application template.
But unfortunately, it doesn’t work quite right out of the box like that. The reason is because we’re setting the modalMessage
and isShowingModal
on the router.
What we need to do is set them on controller. So we’ll grab the controllerFor('application')
, and then we’ll set it on there.
With that done, we’ll see that it’s working like we expect. It should be noted that controllerFor
is a private property, so it might change. However, I don’t know a better way to do this at the moment.
So with these actions set on the application route and the modal-dialog
set on our application template, we can go back to our actions route here and we can start changing these over.
And with those changed, then we’ll be seeing that for all of these actions, we’re using the modal-dialog
instead of the alert
. This is much better.
If you want to learn more about ember-modal-dialog
, you can go to the read me on github.
It contains lots of information, including some live demos, it includes several configurable properties, and also shows how to position it, if you want it to not be on the center of your screen. It also shows you how to change the styles more than we did and do keyboard shortcuts and create custom modals. So if you want to have a type of modal that shows up in several places but not all places, custom modals will be your thing.
So I hope you’ll be able to find ember-modal-dialog
useful, and we should be soon getting back to our regular scheduled screencasts on ‘Actions and Components’.
- Introduction to Ember Actions
- Action Bubbling
- ember-modal-dialog
- Actions and Components in Ember 1.x
- Closure Actions in Ember 2.0 Components-Passing Functions
- Closure Actions in Ember 2.0 Components-Metaprogramming with Parameter Currying
- Closure Actions In Ember 2.0 Components-Return Value
- Closure Actions in Ember 2.0 Components-Block Components