登陆高档弹窗的制作原理代码:
<!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>无标题文档</title>
<style type="text/css">
#tanchuang{
width:600px;
height:450px;
margin-left:-300px; /*设置为宽度的一半*/
margin-top:-225px; /*设置为高度的一半*/
background:#FFF; /*弹窗背景色*/
left:50%;
top:50%;
display: none; /*弹窗默认不显示*/
border:8px solid #999; /*弹窗边框*/
position: absolute;z-index:1002;
}
#tanchuang .donglutitle{
height:90px;
background:#CCC;
float:left;
width:100%;
line-height:90px;
color: #333333;
font-family: '微软雅黑';
font-size: 26px;
font-weight: normal;}
.close_css{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #000; /*弹窗遮照层色*/
z-index:1001;
filter:alpha(opacity=50); /*IE滤镜,透明度50%*/
-moz-opacity:0.5; /*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick = "document.getElementById('tanchuang').style.display='block';document.getElementById('close').style.display='block'">会员注册</a>
<!--弹窗框开始-->
<div id="tanchuang">
<div class="donglutitle">会员登陆</div>
<a href="javascript:void(0)" onclick = "document.getElementById('tanchuang').style.display='none';document.getElementById('close').style.display='none'">点我关闭</a><br/>
我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内我是内要放的内
</div>
<!--弹窗框结束-->
<!--弹窗后面灰色遮照层样式开始-->
<div id="close" class="close_css"></div>
<!--弹窗后面灰色遮照层样式结束-->
</body>
</html>

相关新闻