(upbeat music)
- [Joe] Dialogues and overlays are a fairly common sight
on modern web apps.
But until recently they had to be built manually
using position div elements and other CSS
in JavaScript hacks.
The HTML 5.2 spec, introduced an official dialog element,
which is currently supported natively in Chrome
and other browsers based on the Blink engine
and is under development in Firefox.
In this page here, you'll click on the dialog element.
This contains information about the new dialog element,
and I'll let you read it at your leisure.
There's also a polyfill available for browsers
that don't yet natively support it.
So let's go over to our code.
Let's take a look at the finished version
of this example in our browser.
All right, so here's the finished version
and you can see that when I click on this button,
the dialog shows up and I can dismiss it.
And that's the non-modal version.
And this is the modal version with the page grayed out.
And this backdrop option that you see here
can be styled individually.
All right, so let's open the code and build this.
So here in VSCode, I'll open up dialog_start.
And here's my file.
And if I scroll down, you can see that the dialog element
is defined in HTML right here using the dialog tag.
And once I have defined the dialog structure using markup,
I have to write some script code to handle showing
and closing the dialog in response to the button clicks.
So let's fill that in.
So when the user clicks the show button,
I'm going to show the dialog using the non-modal API.
So I'll write document.getElementById,
and the dialog has an id of dialog1.
So I'll get that dialog and I'll call the show function.
And for the modal version,
I will simply call, showModal instead.
All right, and then I'll add the code to close the dialog
when the OK and Cancel buttons are clicked in the dialog.
So, all right, if, and in this case,
I need to check to see if the dialog is open
by checking the open property, then I'll call dlg.close,
and dlg is right here, let me get the same element.
And in the close function,
I will call this with the value of OK,
for the OK button.
And then for the Cancel button,
I'll just copy that code and paste it down here.
And in this case,
I'll call close with the value of Cancel instead.
All right, so let's try out what we have so far.
So we'll bring this up with our live server and sure enough,
you can see there's the dialog and in this case can see
it's working, but it doesn't look very good.
So we can add some CSS styling to make it look better.
So that's the non-modal version,
and this is the modal version.
And you can see that it kind of slightly grays out,
but I don't really like that, we can do a better job there.
So let's go back to the code.
All right, so here in the code, I'm going to scroll up
and I'm going to uncomment
this style sheet declaration right here.
So I'll uncomment that,
then remove the closing comment there.
All right, so the first style sheet
defines an appearance for the dialog itself,
it has a background color, border-radius, shadow,
and so on.
The next two styles are for the content
inside the dialog.
There's the h1 that defines the title
and the div that contains the dialog content,
the text and the buttons,
and the last style defines an appearance for the backdrop
or the shaded part of the page
that is not part of the dialog
and is only used when the dialog is a modal one.
So let's save this and let's go back to the browser
and we refresh.
And now let's bring up the modal dialog again,
and they can see that the dialog appearance has changed
along with the shaded backdrop area.
All right, there's one more thing to look at,
so let's go back to the code.
So the values that are passed to the dialog close function
are actually available to the rest of the program
as return values from the dialog.
So dialogs also have a couple of events
that your code can listen for,
and I'm going to demonstrate both features here.
So at the bottom of my script, I have some code that listens
for the close and cancel events,
which is fired when the escape key
is used to cancel the dialog.
So what we're going to do is go back to the developer tools
and look at the console because this property here,
the returnValue on the dialog element
should be given whatever was called into the close function.
So when I click the OK button, the string of OK
should show up here for the close function.
And when I Cancel, the string cancel should show up
when this value is accessed off the dialog element
in this case.
So let's go back to the browser
and let's bring up the developer tools.
All right, so let's go ahead and show the dialog.
And when I click OK,
you can see the dialog was closed with the OK button.
And when I show it with the modal,
I'm going to click Cancel,
and you can see that it was closed with Cancel,
and rather than clicking, I'll hit the escape key.
And there you can see that it was both canceled and closed.
So instead of using third-party libraries,
just to show dialogs,
you can now use the built-in feature of HTML.
(upbeat music)