JQuery: Novice to Ninja- P21:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Forms Controls and Dialogs 277 Simple Modal Dialog Modal dialogs are notifications that pop up in the user s face and must be acted on if the user want to continue. It s quite an intrusion people tend to dislike popups so they should only be used if the interaction is essential. Our client informs us it s essential that users agree to an End User License Agreement EULA to use the StarTrackr application. Not all modal dialogs are as disagreeable as our StarTrackr EULA however so they re a useful control to learn to build. What you might notice from the figure is that a modal dialog looks strikingly like a lightbox. It s a lightbox with some buttons To supply the contents of a dialog we ll embed the HTML in a hidden div. When we want to show it we ll copy the contents into the dialog structure and fade it in. That way we can have multiple dialogs that use the same lightbox elements chapter_07 17_simple_modal_dialog excerpt div id overlay div id blanket div div -- the dialog contents -- div id eula class dialog h4 End User License Agreement h4 div class buttons a href class ok Agree a a href class cancel Disagree a div div You ll see that we ve included a couple of button links in the bottom of the dialog. These are where we can hook in our events to process the user interaction. It s a fairly simple HTML base so as you can imagine CSS plays a big part in how effective the dialogs look. We want to stretch our structure and lightbox blanket over the entire screen. The modal dialog will appear to sit on top of it 278 jQuery Novice to Ninja chapter_07 17_simple_modal_dialog excerpt overlay display none top 0 right 0 bottom 0 left 0 margin-right auto margin-left auto position fixed width 100 z-index 100 blanket background-color 000000 top 0 bottom 0 left 0 display block opacity position absolute width 100 .dialog display none margin 100px auto position relative width 500px padding 40px background white -moz-border-radius 10px Now to bring the .
