HTML5+CSS3 弹出层

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
/*
 * 透明层
 */
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: gray;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
/*
 * 登录层
 */
.white_content {
display: none;
position: absolute;
top: 25%;
left: 35%;
width: 25%;
height: 25%;
padding: 16px;
border: 5px solid lightblue;
background-color: #F8F8F8;
z-index: 1002;
overflow: auto;
}
#light_title{text-align: center;}
#light_login{text-align: center;}
#cancel{background-color:#b3b8bb;width:30%;height:35px;float:left;margin-left:17%;margin-top: 10%;}
.canceltext{color:#FFFFFF;font-size: 1em;line-height: 35px;margin-left:30%;}
#confirm{background-color:#3196fe;width:30%;height:35px;float:right;margin-right:17%;margin-top: 10%;}
.confirmtext{color:#FFFFFF;font-size: 1em;line-height: 35px;margin-left:36%;}
</style>


</head>
<body>
<div class="midd3">
<a href="javascript:void(0)"
onclick="document.getElementById('light').style.display='block';
                document.getElementById('fade').style.display='block'"><img
class="but" src="./images/login1.png" />
</a>
</div>
<!--弹出层-->


<div id="light" class="white_content">
<p id="light_title">用户登录</p>
<div id="light_login">
&nbsp;帐号:
<input type="text" id="username" />
<br/>
密码:
<input type="password" id="password" />
</div>
<div id="cancel"
onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';document.getElementById('xuanzheinfo').value='1'">
<span class="canceltext">取消</span>
</div>
<div id="confirm" onclick="messageCode();">
<span class="confirmtext">确定</span>
</div>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>


阅读更多
文章标签: css csdn 弹出层
个人分类: HTML+CSS
上一篇oracle 连接字符串(拼接字段)
下一篇js 实现60秒倒计时
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭