Bummer! You have been redirected as the page you requested could not be found.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Dialog!
You have completed HTML Dialog!
Preview
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