Appendix A. Modal Dialogs
confirm dialogs in a Chrome App (they’re undefined). But, with the new HTML5
Before Chrome 37 introduced the
<dialog> tag, the way to implement a dialog was to define a
<div> element in HTML that completely covered the window, both disabling all user-interface components in the window (making the dialog modal) and partially obscuring the window, making it look disabled. Then, the dialog itself was shown in front with any user-interface components it needed. Now, this complexity is unnecessary. Figure A-1 shows the example app we’ll use in this appendix.
Clicking the button on the left displays an alert dialog, as illustrated in Figure A-2.
Clicking anywhere outside the dialog does nothing. Clicking the OK button dismisses the dialog and restores the original screen. Then, clicking the right button at the top pops up the confirm dialog in Figure A-3.
Clicking Yes shows the alert in Figure A-4. Clicking No shows an analogous alert.
All you need to do to implement a dialog is to add a
<dialog> tag to the body: