O'Reilly logo

Programming Chrome Apps by Marc Rochkind

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

The app’s initial window with two buttons
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.

An alert dialog
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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required