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
Traditional dialog windows created with other HTML markup and CSS have been implemented in most frontend frameworks for a long time, and that's probably still the way to go, since the HTML dialog element still has limited browser support. However, there are many reasons to consider using the <dialog> element moving forward, such as accessibility by screen readers and the ability for things like search engines and machine learning agents to interpret dialog windows.
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
[MUSIC]
0:00
Hi, I'm Nick.
0:09
If you visit just a few websites,
0:11
chances are you'll come across
some kind of dialogue box.
0:13
This might be to get you confirm
a change in a web app or
0:17
enter your email address to sign up for
a newsletter.
0:21
It's a common user interface designed
pattern that comes up over and over again,
0:24
so the W3C came up with some standardized
HTML markup to describe a dialog window.
0:30
Traditional dialog windows created
with other HTML markup and
0:36
CSS have been implemented in most
front end frameworks for a long time.
0:40
And that's probably still the way to go
since the HTML dialog element still has
0:45
limited browser support.
0:50
To see the current details on that, check
the notes associated with this video.
0:53
So then, if front end frameworks
are still the better choice,
0:57
why create a standardized
dialogue element?
1:02
Well there are many reasons, but
chief among them is accessibility by
1:05
screen readers and the ability for
things like search engines and
1:10
machine learning agent to
interpret dialog windows.
1:14
As browser support improves overtime and
front end frameworks include support for
1:18
the dialog element,
that will be the way to go moving forward.
1:24
First, launch the workspace
associated with this video.
1:30
Inside, you'll find two files,
an index.html file, and a JavaScript file.
1:34
Both are just there to
help us get started.
1:42
First, we're going to get started on
the HTML markup for the dialog element.
1:45
Then later, we'll add some JavaScript.
1:50
Inside the index.html file,
1:53
let's create the dialog element itself
with an opening and closing tag.
1:56
So inside the body,
I'll create a dialog element
2:01
with an open and closing tag,
it's that simple.
2:07
However, this won't show
anything on the page just yet.
2:11
In order for this to appear, we need
to add the value-less attribute open.
2:15
So inside of the opening tag here, I'll
create a space and type the word open.
2:21
Next let's open up
the dialogue element and
2:29
create some separation between these tags.
2:33
And inside we'll create a simple form
with a text input in a submit button.
2:35
So first I will create the form and
2:43
we are going to use a different
method called dialog.
2:46
I will explain that just in a moment,
and then we have the closing tag there.
2:51
And then we'll just create
an input of tag text.
2:56
And obviously there are other
attributes we'd need in a real form,
3:01
but we'll just keep this simple, and
3:07
then we'll create a button
element of type, submit.
3:10
And inside of the button,
we'll just type the word OK.
3:15
Here I've set the method
of the form to dialog.
3:21
This is a new form method that works in
concert with a parent dialog element.
3:26
When the submit button is pressed,
it will submit the form and
3:33
dismiss the dialog window.
3:38
Let's save this file.
3:40
And click the preview button in the upper
right to see it in a web browser.
3:43
Here we can see the default styling for
the form and
3:49
when we hit the OK button,
the dialog window disappears.
3:53
Switching back to our work space,
let's create some buttons that will allow
3:59
us to make the dialog
window reappear again.
4:03
These will need JavaScript to work,
but we'll add that later.
4:06
So just after the dialog element
here we'll create a <button and
4:10
we're gonna add the id '"openDialog"
with a capital D there.
4:17
And inside of our button,
4:24
we'll label it Open Dialog.
4:29
And let's just copy that, and
4:34
paste it on the next line cuz we're gonna
just change a couple of things here.
4:36
Instead of the id openDialog we're
going to say openModalDialog and
4:41
same thing with a text inside,
Open Modal Dialog.
4:48
So here I've created two buttons,
once we add some JavaScript the first
4:55
button will open the dialog window
just like we saw previously.
5:00
However, the second button,
the Open Modal Dialog
5:05
will open a dialog window that
blocks other page interactions.
5:11
This is a common design pattern because
often times when a dialog window is
5:16
open you need the user to
perform some sort of interaction
5:20
before they continue using
the rest of the application.
5:24
Now save those changes and let's move on.
5:28
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