ASP.NET----实现点击按钮或链接弹出登录对话框

主要是利用遮罩的原理：

<!--默认让登陆窗体不显示-->
    <style type="text/css">
        #login
        {
            position: relative;
        }
    </style>
<!--窗体不显示执行结束-->

上述主要实现默认让id=“login”登录窗体隐藏

<!--点击登陆时弹出隐藏的登陆窗体-->
    <script type="text/javascript">
        $(document).ready(function () { $("#yz").click(function () { $("div#login").show(); }); });
    </script>
<!--脚本执行结束-->

以上主要是利用Jquery实现隐藏窗体的显示,具体标签大家自行命名,此处只为大概原理，当然还有很多好的方法代码。

以下为收集而来的例子：

jquery遮罩例子：

登录前：

登录后：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="zhaozhao.aspx.cs" Inherits="JqueryZhezhao.zhaozhao" %>

<!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>
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <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> 
</head>
<body>
    <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:780px;z-index:1001; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -400px;"> 
            <div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" > 
                <div> 
                    用户： 
                  <asp:TextBox ID="TxtUserName" runat="server" > </asp:TextBox> 
                </div> 
                <div> 
                    密码： 
                  <asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password" > </asp:TextBox> 
                </div> 
                <br/> 
                <div> &nbsp; &nbsp; 
                    <asp:Button ID="BttLogin" runat="server" Text=" 登 陆 "/>&nbsp; 
                    <input id="BttCancel" type="button" value=" 取 消 " onclick="ShowNo()" /> 
                </div> 
            </div> 
      </div> 
    </form>
</body>
</html>

效果：

上述效果代码出自以下地址：

http://js.alixixi.com/a/2010092464909.shtml

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<title>网页特效 漂亮的点击弹出的登录窗口 站长特效网</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
font-style:normal;
list-style-type:none;
text-decoration:none;
}
div#zzjs_net input#w_zzjs_net {
width:78px;
height:39px;
border:none;
cursor:pointer;
position:absolute;
top:40px;
left:100px;
background:transparent url('/img/loginbg_20100905zzjsnet.png') 0 -70px no-repeat;
}
div#my_zzjs_net {
position:absolute;
top:0;
left:0;
background:#fff;
filter:alpha(opacity=20);
-moz-opacity:0.2;
z-index:100;
}
div#login {
position:absolute;
top:75px;
left:100px;
width:293px;
z-index:200;
}
div#login h2 {
height:26px;
padding-top:3px;
padding-left:25px;
background:transparent url('/img/loginbg_20100905zzjsnet.png') -84px -70px no-repeat;
}
div#login h2 input {
height:18px;
width:18px;
float:right;
border:none;
cursor:pointer;
margin:2px 6px 0 0;
background:transparent url('/img/loginbg_20100905zzjsnet.png') 0 -169px no-repeat;
}
div#login h2 a {
display:block;
float:left;
width:83px;
height:26px;
line-height:26px;
text-align:center;
text-decoration:none;
color:#666;
}
div#login h2 a.cur {
color:#f00;
background:transparent url('/img/loginbg_20100905zzjsnet.png') 0 -187px no-repeat;
}
div#login ul {
padding:14px 0 18px 12px;
background:transparent url('/img/loginbg_20100905zzjsnet.png') -84px bottom no-repeat;
}
div#login ul li {
padding-left:60px;
margin-top:10px;
display:inline-block;
}
div#login ul li {
display:block;
}
div#login ul li:after {
content:"youdian";
clear:both;
display:block;
height:0;
visibility:hidden;
}
div#login ul li tt {
float:left;
width:60px;
margin-left:-70px;
text-align:right;
line-height:22px;
color:#444;
}
div#login ul li div input.cell, div#login ul li div input.cell2 {
height:16px;
padding:2px;
line-height:16px;
width:179px;
border:1px #dcdcdc solid;
color:#666;
}
div#login ul li div input.cell2 {
width:50px;
}
div#login ul li div label {
color:#666;
cursor:pointer;
}
div#login ul li div img {
margin-bottom:-7px;
margin-left:8px;
}
* html div#login ul li div img {
margin-bottom:-4px;
}
*+html div#login ul li div img {
margin-bottom:-4px;
}
div#login ul li div input#fnlogin {
width:59px;
height:21px;
cursor:pointer;
border:none;
margin-right:15px;
background:transparent url('/img/loginbg_20100905zzjsnet.png') 0 -148px no-repeat;
}
div#login ul li p {
padding-top:4px;
color:#f00;
}
body {
}
</style>
</head>
<body>
<div id="zzjs_net">
<input id="w_zzjs_net" type="button" title="" />
</div>
<div id="my_zzjs_net" style="display:none;"></div>
<div id="login" style="display:none;">
 <h2>
 <input id="out_zzjs_net" type="button" title="退出登录" />
 <a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a>
 </h2>
 <ul>
  <form id="LoginForm" name="LoginForm" action="" method="post" enctype="multipart/form-data" >
   <li>
    <input id="loginType" name="loginType" type="hidden"/>
    <tt><label id="logtype" for="email">Email:</label></tt>
    <div><input id="username" name="username" type="text" class="cell"/></div>
   </li>
   <li>
    <tt><label for="password">密　码:</label></tt>
    <div><input id="password" name="password" type="password" class="cell" /></div>
   </li>
   <li>
    <tt></tt>
    <div><input id="reme" name="zzjs.net" type="checkbox" /><label for="reme">下次自动登录</label>
    </div>
   </li>
   <li>
    <tt></tt>
    <div><input id="fnlogin" type="button"/><a href="http://www.zzjs.net">忘记密码</a></div>
   </li>
  </form>
 </ul>
</div>
<script type="text/javascript">
function ks() {
 return true;
}
window.onerror=ks
function g(obj) {
 return document.getElementById(obj);
}
var login = {
 title:null,
 show:function(){
  var sWidth,sHeight;
  sWidth = screen.width;
  sWidth = document.body.offsetWidth;
  sHeight=document.body.offsetHeight;
  if (sHeight<screen.height){sHeight=screen.height;}
  g("my_zzjs_net").style.width = sWidth + "px";
  g("my_zzjs_net").style.height = sHeight + "px";
  g("my_zzjs_net").style.display = "block";
  g("login").style.display = "block";
  g("login").style.right = g("zzjs_net").offsetLeft + "px";
  // window.status = g("zzjs_net").offsetLeft;
 },
 hide:function(){
  g("my_zzjs_net").style.display = "none";
  g("login").style.display = "none";
 }
}
g("w_zzjs_net").onclick = function(){
 login.show();
 this.blur();
 this.style.backgroundPosition = "0 -109px";
};
g("fnlogin").onclick = function() {
 // The following 5 lines of code is used to get the login type & pass to the form
 // One More line of code is insert to root_index.jsp to capture the hidden value
 if (document.getElementById("logtype").innerHTML == "Email:") {
 document.getElementById('loginType').value = 'email';
 } else {
 document.getElementById('loginType').value = 'mobile';
 }
 document.LoginForm.submit();
};
g("out_zzjs_net").onclick = function(){login.hide();g("w_zzjs_net").style.backgroundPosition = "0 -70px";};
var aa = g("login").getElementsByTagName("a");
var aTab = new Array();
for(var i=0; i<aa.length; i++){
 if(aa.parentNode.nodeName == "H2"){
 aTab.push(aa);
 }
}
for(var j=0; j<aTab.length; j++){
 aTab[j].onclick = function(){
  this.blur();
  if (this.className != "cur"){
   for(var k=0; k<aTab.length; k++){aTab[k].className = ""};
   this.className = "cur"
   g("logtype").innerHTML = this.name + ":";
  }
 }
}
</script>
<script language="javascript">
login.hide();
</script>
</body>
</html>

　　还有一些不错的以后慢慢写！继续项目中~~

posted @ 2011-07-28 09:50 brainmao 阅读(3171) 评论(1) 编辑收藏举报

刷新页面返回顶部

ASP.NET----实现点击按钮或链接弹出登录对话框

公告