asp.net网站中遇到了问题，高手请教
本人刚学asp.net，前台更是首次手写。想实现一个新浪博客登陆那种的弹出一个登录框然后周围变灰的效果，我想用分层来写，把对话框放在层里面，具体代码如下：<%@PageL...
本人刚学asp.net，前台更是首次手写。
想实现一个新浪博客登陆那种的弹出一个登录框然后周围变灰的效果，我想用分层来写，把对话框放在层里面，具体代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>InfoFly</title>
<style type="text/css">
#form1
{
text-align: center;
}
</style>
<script type ="text/javascript">
function show() {
div1.style.display = "inline";
div1.style.width = document.body.clientWidth;
div1.style.height = document.body.clientHeight;
div2.style.display = "inline";
div2.style.top = document.body.clientHeight - div2.clientHeight;
div2.style.left = document.body.clientWidth - div2.clientWidth;
}
function closeshow() {
div1.style.display = "none";
div2.style.display = "none";}
</script>
</head>
<body style="background-color: #000000">
<form id="form1" runat="server">
<embed src="image/Logo.swf" width="1000" height="300" wmode="transparent">
<p style="text-align: center">
<asp:Button ID="Login" runat="server" BackColor="Silver" Height="30px"
Text="登陆" Width="200px" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px" onclick="show()" />
</p>
<p style="text-align: center">
<asp:Button ID="News" runat="server" Text="新鲜事" Width="200px"
Height="30px" BackColor="Silver" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px"/>
</p>
<p style="text-align: center">
<asp:Button ID="Register" runat="server" Text="注册" Width="200px" Height="30px"
BackColor="Silver" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px"/>
</p>
<div id = "div1"
style="background-color: #C0C0C0; position: absolute; padding: 0px; z-index: 1; display: none" filter:alpha("opacity=30")></div>
<div id = "div2"
style="width: 300px; height: 200px; position: absolute; z-index: 2; display: none; background-color: #9999CC; border-style: inset; border-color: #0000FF" ></div>
</form>
</body>
</html>
希望高手调试下指导下，在下感激不尽！ 展开
想实现一个新浪博客登陆那种的弹出一个登录框然后周围变灰的效果，我想用分层来写，把对话框放在层里面，具体代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>InfoFly</title>
<style type="text/css">
#form1
{
text-align: center;
}
</style>
<script type ="text/javascript">
function show() {
div1.style.display = "inline";
div1.style.width = document.body.clientWidth;
div1.style.height = document.body.clientHeight;
div2.style.display = "inline";
div2.style.top = document.body.clientHeight - div2.clientHeight;
div2.style.left = document.body.clientWidth - div2.clientWidth;
}
function closeshow() {
div1.style.display = "none";
div2.style.display = "none";}
</script>
</head>
<body style="background-color: #000000">
<form id="form1" runat="server">
<embed src="image/Logo.swf" width="1000" height="300" wmode="transparent">
<p style="text-align: center">
<asp:Button ID="Login" runat="server" BackColor="Silver" Height="30px"
Text="登陆" Width="200px" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px" onclick="show()" />
</p>
<p style="text-align: center">
<asp:Button ID="News" runat="server" Text="新鲜事" Width="200px"
Height="30px" BackColor="Silver" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px"/>
</p>
<p style="text-align: center">
<asp:Button ID="Register" runat="server" Text="注册" Width="200px" Height="30px"
BackColor="Silver" BorderColor="#999999" BorderStyle="Double"
BorderWidth="4px"/>
</p>
<div id = "div1"
style="background-color: #C0C0C0; position: absolute; padding: 0px; z-index: 1; display: none" filter:alpha("opacity=30")></div>
<div id = "div2"
style="width: 300px; height: 200px; position: absolute; z-index: 2; display: none; background-color: #9999CC; border-style: inset; border-color: #0000FF" ></div>
</form>
</body>
</html>
希望高手调试下指导下，在下感激不尽！ 展开
展开全部
你要的是遮罩层效果吧
以下是简单HTML代码 自己修改下就可以用了，然后登陆代码
改成AJAX就OK了 AJAX保存SESSION 注意清空AJAX请求缓存
<html>
<head>
</head>
<body>
<!--用js控制显示-->
<script type="text/javascript" language="javascript">
function ShowNo() //隐藏两个层
{
document.getElementById("doing").style.display="none";
document.getElementById("divLogin").style.display="none";
}
function $(id)
{
return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
}
function showFloat() //根据屏幕的大小显示两个层
{
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display="";
}
function getRange() //得到屏幕的大小
{
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top==0 && left==0 && height==0 && width==0)
{
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return {top:top ,left:left ,height:height ,width:width } ;
}
</script>
<style type="text/css">
body{margin:0px;}
</style>
<form id="form1" runat="server">
<a href="javascript:void(0)" onclick="showFloat()">登陆</a> //登陆链接
<!--加一个半透明层-->
<div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:500px;z-index:1001; position: absolute; display:none; margin:100px auto auto auto">
<input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" />
</div>
</div>
</div>
</form>
</body>
</html>
以下是简单HTML代码 自己修改下就可以用了，然后登陆代码
改成AJAX就OK了 AJAX保存SESSION 注意清空AJAX请求缓存
<html>
<head>
</head>
<body>
<!--用js控制显示-->
<script type="text/javascript" language="javascript">
function ShowNo() //隐藏两个层
{
document.getElementById("doing").style.display="none";
document.getElementById("divLogin").style.display="none";
}
function $(id)
{
return (document.getElementById) ? document.getElementById(id) : document.all[id] ;
}
function showFloat() //根据屏幕的大小显示两个层
{
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display="";
}
function getRange() //得到屏幕的大小
{
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top==0 && left==0 && height==0 && width==0)
{
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return {top:top ,left:left ,height:height ,width:width } ;
}
</script>
<style type="text/css">
body{margin:0px;}
</style>
<form id="form1" runat="server">
<a href="javascript:void(0)" onclick="showFloat()">登陆</a> //登陆链接
<!--加一个半透明层-->
<div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:500px;z-index:1001; position: absolute; display:none; margin:100px auto auto auto">
<input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" />
</div>
</div>
</div>
</form>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
ajax 里有这么一个控件的，你可以学习一下。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
