We'll start again by creating the underlying markup that the dialog is built with and add any necessary styling.
First, add the following code to the
<body>in a fresh copy of the template file:<div id="dialog"> <header>A dialog box of some description</header> Lorem ipsum etc, etc. <footer><button>Ok</button></footer> </div>
We'll also need to link to a stylesheet in the
<head>of the page:<link rel="stylesheet" href="css/fadeOut.css">
Save this page as
fadeOut.htmlin 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", "FranklinGothic 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; } ...
