Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> prompt </title>
<Style>
*{
Margin: 0;
Padding: 0;
Font-size: 12px;
}
Html, body {
Height: 100%;
Width: 100%;
}
# Content {
Background: # FFFFFF;
Padding: 30px;
Height: 100%;
}
# Content {
Font-size: 30px;
Color: #369;
Font-weight: 700;
}
# Alert {z-index: 2;
Border: 1px solid #369;
Width: 300px;
Height: 150px;
Background: # e2ecf5;
Z-index: 1000;
Position: absolute;
Display: none;
}
# Alert h4 {
Height: 20px;
Background: #369;
Color: # fff;
Padding: 5px 0 0 5px;
}
# Alert h4 span {
Float: left;
}
# Alert h4 span # close {
Margin-left: 210px;
Font-weight: 500;
Cursor: pointer;
}
# Alert p {
Padding: 12px 0 0 30px;
}
# Alert p input {
Width: 120px;
Margin-left: 20px;
}
# Alert p input. myindium {
Border: 1px solid # ccc;
Height: 16px;
}
# Alert p input. sub {
Width: 60px;
Margin-left: 30px;
}
# Mask {position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; opacity: 0.3; display: none; z-index: 1 ;}
</Style>
</Head>
<Body>
<Div id = "content"> <a href = "#"> Registration </a> </div>
<Div id = "alert">
<H4> <span> Register now </span> <span id = "close"> close </span> <P>
<Label> User Name </label>
<Input type = "text" class = "myindium" onmouseover = "this. style. border = '1px solid # f60' "onfoucs =" this. style. border = '1px solid # f60' "onblur =" this. style. border = '1px solid # ccc '"/>
</P>
<P>
<Label> password </label>
<Input type = "password" class = "myindium" onmouseover = "this. style. border = '1px solid # f60' "onfoucs =" this. style. border = '1px solid # f60' "onblur =" this. style. border = '1px solid # ccc '"/>
</P>
<P>
<Input type = "submit" value = "register" class = "sub"/>
<Input type = "reset" value = "reset" class = "sub"/>
</P>
</Div>
<Div id = "mask"> </div> <! -- Mask layer div -->
<Script type = "text/javascript">
Var myAlert = document. getElementById ("alert ");
Var myMask = document. getElementById ('mask ');
Var reg = document. getElementById ("content"). getElementsByTagName ("a") [0];
Var mClose = document. getElementById ("close ");
Reg. onclick = function ()
{
MyMask. style. display = "block ";
MyAlert. style. display = "block ";
MyAlert. style. position = "absolute ";
MyAlert. style. top = "50% ";
MyAlert. style. left = "50% ";
MyAlert. style. marginTop = "-75px ";
MyAlert. style. marginLeft = "-150px ";
Document. body. style. overflow = "hidden ";
}
MClose. onclick = function ()
{
MyAlert. style. display = "none ";
MyMask. style. display = "none ";
}
</Script>
</Body>
</Html>