Copy codeThe Code is as follows: <Head>
<Meta charset = "UTF-8"/>
<Script type = "text/javascript" src = "jquery-1.8.2.js"> </script>
<Title> transparent background </title>
<Style>
*{
Margin: 0;
Padding: 0;
}
Body {
Position: relative;
Width: 100%;
Height: 100%;
}
. Aaa {
Background-color: # fff;
Border: 10px solid gray;
Border-radius: 4px 4px 4px 4px;
Display: none;
Width: 300px;
Position: absolute;
Top: 30%;
Left: 30%;
Z-index: 11;
}
. Show {
Display: none;
Width: 100%;
Height: 100%;
Position: absolute;
Z-index: 10;
Left: 0;
Top: 0;
Background: #000000;
Opacity: 0.3;
Filter: alpha (opacity = 30 );
}
A {
TEXT-DECORATION: none
}
. W_close: hover {
Color: #666666;
Font-size: 12px;
}
. W_close: link {
Color: #666666;
Font-size: 12px;
}
. W_close: active {
Color: #666666;
Font-size: 12px;
}
. W_close: visited {
Color: #666666;
Font-size: 12px;
}
</Style>
</Head>
<Body>
<Div id = "test">
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
<P> Liu Chengliang </p>
</Div>
<Div id = "showError"> display prompt </div>
<Div id = "" class = "show"> </div>
<Div class = "aaa">
<Div style = "height: 20px; background-color: # F2F2F2">
<Span style = "float: right; cursor: pointer; padding-top: 4px; padding-right: 4px; "id =" close "> <a class =" w_close "href =" javascript: void (0); "> close </a> </span>
</Div>
<Div style = "">
<Table>
<Tr>
<Th> User name: </th>
<Td> <input type = "text" name = "name"> </td>
</Tr>
<Tr>
<Th> password: </th>
<Td> <input type = "password" name = "password"> </td>
</Tr>
<Tr>
<Td> <input type = "submit" value = "submit"> </td>
</Tr>
</Table>
</Div>
</Div>
</Body>
<Script type = "text/javascript">
$ ("# ShowError"). live ('click', function (){
$ (". Show"). show ();
$ (". Aaa"). show ();
// $ ("Body"). addClass ("fli ");
})
$ ("# Test"). live ('click', function (){
Alert (11111 );
})
$ ("# Close"). live ('click', function (){
$ (". Show"). hide ();
$ (". Aaa"). hide ();
})
</Script>
</Html>
