HTML5+CSS3 弹出层

最新推荐文章于 2024-08-11 00:51:52 发布

置顶 super牛牛

最新推荐文章于 2024-08-11 00:51:52 发布

阅读量4.2k

点赞数

分类专栏： HTML+CSS 文章标签： css csdn 弹出层

本文链接：https://blog.csdn.net/u012668297/article/details/28650095

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ 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)"
οnclick="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">
 帐号:
<input type="text" id="username" />
<br/>
密码:
<input type="password" id="password" />
</div>
<div id="cancel"
οnclick="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" οnclick="messageCode();">
<span class="confirmtext">确定</span>
</div>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>