Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
On its own the <dialog> element isn't very useful. However, some JavaScript can make it become more interactive.
Resources
-
HTML Dialog - caniuse.com - Check out this chart from caniuse.com to see current browser support for the
<dialog>element. -
HTML Dialog - MDN - Here's the MDN documentation page with the full details on the
<dialog>element. -
HTML Dialog Polyfill - If you want to use the
<dialog>element now, check out this polyfill from the Google Chrome team that makes it work in all modern browsers.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
I preparation for writing our JavaScript,
I want to remove the open attribute from
0:00
the dialog element and then add an ID
attribute so we can select it later,
0:05
just like the buttons.
0:11
We'll get rid of the open attribute and
type id, dialogWindow.
0:19
Save those changes and
switch over to the app.js file.
0:27
Inside of the app.js JavaScript file,
we already have
0:34
an anonymous function that will
execute when the page loads.
0:39
This is where we'll write
our event based code.
0:44
First, we need to gather the elements
on the page and the variables,
0:46
the dialog window and the two buttons.
0:51
So let’s just type a comment that
says gather page elements and
0:54
we’ll create a variable for
each one and get them by their ID.
1:00
So we’ll create a variable
called openDialog.
1:04
And we'll set that to
document.getElementById.
1:11
And we'll use the same ideas we
did previously openDialog and
1:17
end line semi colon A.nd let's
just copy that two times
1:22
because the next two lines
are going to be very similar.
1:27
Next one is openModalDialog and
same thing with the ID.
1:31
And the last one will be dialogWindow,
and again,
1:37
we're just naming these variables
the same thing as the element IDs.
1:42
Next, we need to create two event
listeners, one for each of the buttons.
1:49
I'll write the one for
opening the dialog window normally first.
1:53
So let's create comment here that says,
1:59
Open the dialog window normally.
2:05
And we'll use a variable, openDialog.
2:10
And we're gonna add
an EventListener to that.
2:14
And we want this to be on a click, and
2:21
we'll execute a function.
2:25
And let's open that up and
make sure we end that line with a ;.
2:32
And inside of here,
we want to access the dialogWindow,
2:39
and on that,
we're going to call the method show.
2:44
This will add an EventListener to
2:50
the openDialog button, so
that when it's clicked,
2:54
the inner function show will execute.
3:01
And it does exactly what it sounds like,
it displays the dialog element on the page
3:06
the same way that it did when we used
the open attribute before in our HTML.
3:13
Now let's copy and
paste what we just did here,
3:19
because we're going to do the same
thing for our open modal dialog window.
3:24
So let's change our code to match that.
3:30
We're going to open the dialog
window as a modal window, and
3:33
then we're going to change the ID
here to openModalDialog, and
3:39
we're still adding an event
listener on click.
3:46
We still want to call function on
the dialogWindow itself to open it.
3:52
But this time instead of just showing it,
we're gonna type showModal.
3:56
So here instead of the show function,
we're using the showModal function.
4:02
And this is a bit different,
it will still show the dialog window.
4:08
But this time the rest of
the page will have a grey,
4:13
transparent overlay that will
block any other mouse clicks.
4:16
Save this file and
let's switch back to browser and
4:20
refresh the page to see this in action.
4:25
Now, when I click the Open Dialog button,
the dialog window appears.
4:28
I can type some input here, and
4:36
then I can click the OK button to
submit the form and dismiss the window.
4:41
Let's open that again and notice
when I click the open dialog button,
4:47
I can still click on these
other page elements.
4:53
Now let's close this again.
4:57
And now, click the Open Modal Dialog.
5:01
It's the same window, but this time the
browser has applied some default styling
5:05
to center it on the page and
add an overlay.
5:10
If you try to click the buttons,
you can't any more.
5:14
Clicking OK will get rid of the dialog.
5:19
Like I said previously, browser support
for the dialog element still isn't great.
5:24
However, you can imagine
how an email sign-up or
5:28
a login form could be placed inside
the dialog window, creating a convenient
5:32
tool for developers, and a common
standard for people browsing the web.
5:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up