jQuery 1.4 Animation Techniques - Index of

Time for action – creating the dialog
[ 29 ]
Chapter 2
We'll start again by creating the underlying markup that the dialog is built with and add any
necessary styling.
1. First, add the following code to the in a fresh copy of the template file:
A dialog box of some description
Lorem ipsum etc, etc.
Ok
2. We'll also need to link to a stylesheet in the of the page:
3. Save this page as fadeOut.html in the main project folder. The code for the
stylesheet is as follows:
#dialog {
background-color:#fff; width:300px; padding:10px;
font:normal 14px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
border:1px solid #aaa; -moz-border-radius:7px;
-webkit-border-radius:7px; border-radius:7px;
-moz-box-shadow:2px 2px 5px #000;
-webkit-box-shadow:2px 2px 5px #000;
box-shadow:2px 2px 5px #000;
}
#dialog:after {
content:""; height:0; display:block; clear:both;
visibility:hidden;
}
#dialog header {
display:block; padding-bottom:5px; margin-bottom:10px;
font-weight:bold; font-size:16px; border-bottom:1px solid #aaa;
}
#dialog footer {
display:block; padding-top:10px; margin-top:10px;
border-top:1px solid #aaa;
}
#dialog button { float:right; }