Practice exercises CHAPTER 9 409
position: absolute;
background-color: black;
z-index:100;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}- Add a style rule for the messageBox element.
This element will not be displayed by default. Its size should be the entire screen. Its
Z-Index should be higher than anything on the page, including the cover that you just
set. Your style should look like the following.
#messageBox {
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 101;
} - Add a style rule for the messageContent element.
This element will not be displayed by default. Its size should be 30 percent wide and
30 percent tall. It will be centered by setting the left and right margins to auto. Its
top margin will be 100 pixels from the top. Its border style will be set to solid, and its
border width will be set to 1 pixel. Its padding will be set to 10 pixels. Your style should
look like the following.
#messageContent {
border-style: solid;
border-width: 1px;
display: none;
position: relative;
margin: 100px auto auto auto;
background-color: yellow;
width: 30%;
height: 30%;
padding: 10px;
} - In the default.js file, add a reference to the jQuery library. Add a milliseconds variable
by which to set the duration of the animations and set it to 1,000. Add an opacity vari-
able by which to set the opacity of the cover and set it to 0.5, as shown in the following
code example.
///
var milliseconds = 1000;
var opacity = 0.5;