Programming Chrome Apps

Appendix A. Modal Dialogs

As is pointed out in Chapter 1, you can’t call the usual JavaScript alert and confirm dialogs in a Chrome App (they’re undefined). But, with the new HTML5 <dialog> tag, it’s easy to build modal dialogs using only standard HTML, CSS, and JavaScript.

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.

Figure A-1. The app’s initial window with two buttons

Clicking the button on the left displays an alert dialog, as illustrated in Figure A-2.

Figure A-2. An alert dialog

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:

<dialog ...