实现代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>無題のページ</title>
<link rel="stylesheet" href="StyleSheet.css" type ="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script language ="jscript" type ="text/javascript">
function ShowLogin()
{
var ele=document.getElementById("loginForm");
var block=document.getElementById("block");
ele.style.display="";
block.style.display="";
}
function Reset()
{
document.getElementById("loginForm").style.display="none";
document.getElementById("block").style.display="none";
}
// window.onload=Reset();
</script>
<div id="loginForm">
<table>
<tr>
<td>
</td>
<td>
<input type="hidden" value="Login" name="Login" />
</td>
</tr>
<tr>
<td>
用户名：
</td>
<td>
<input name="userName" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input id="password" name="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陆" />
</td>
<td>
<input type="reset" value="取消" onclick="Reset()" />
</td>
</tr>
</table>
</div>
<div id="block">
</div>
</form>
</body>
</html>
/*登陆Form*/
#loginForm
{
border:solid 1px #AED5FD;
position:absolute;
top:35%;
left:40%;
z-index:2000;
background-color:#EAF4FE;
}
/**//*屏蔽Div*/
#block
{
background-color:#CCCCCC;
position:absolute;
top:0px;
left:0px;
z-index:1000;
display:block;
width:100%;
height:210%;
/**//*设置屏蔽div的透明度*/
filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40);
} 软件开发网
以层代替弹出窗口,弹出DIV层窗口
实现代码如下：
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p> 可以根据自己要求修改css样式<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">点击这里打开窗口< /a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
0 评论:
发表评论