遮罩.docx

1、遮罩Jacob - 激情程序人生一个热爱IT，衷于互联网的程序猿2012-06-13 16:32 Jquery实现遮罩层效果、遮罩层的各个部分样式请选择发送时间%-%-%遮罩层的背景主要样式：display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:#8FB0D1;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);遮罩层的效果图：#Jquery 举报 浏览(206) 评论(1) 转载(1) JQue

2、ry遮罩层登录界面实现（AJAX实现登录验证）Admin2010年8月11日名人名言：思想好比火星：一颗火星会点燃另一颗火星。一个深思熟虑的教师和班主任，总是力求在集体中创造一种共同热爱科学和渴求知识的气氛，使智力兴趣成为一些线索，以其真挚的、复杂的关系即思信的相互关系把一个个的学生连接在一起。苏霍姆林斯基 JQuery遮罩层登录界面实现（AJAX实现登录验证） 操作系统：Windwos7 Ultimate开发工具：Visual Studio 2010数据库：Sql Server 2005测试浏览器：IE8、FF3.6.8、Google Chrome （IE8中弹出登录层后会出现竖拉条，其他两

3、种没有出现）1、预览 1）登录前 2）点击登录显示登录窗口（层） ，同时用一个灰色透明层遮罩主窗体内容，点击【登录】，隐藏【登录】，显示loading图，登录失败，显示【登录】，隐藏登录图，同时显示提示信息 3）登录成功后，去掉去掉遮罩层和登录层，显示“xxx，您好！ ”2、实现 使用VS2010创建一个Web Site，此功能是在母版页Site.master中实现的。VS2010会自动添加JQuery的js文件到Scripts文件夹，并创建一个母版页和基于此母版页的Default.aspx和About.aspx两个窗体。 1）登录层界面设计，看Site.master中的代码FlyNoteBo

4、ok   FlyNoteBook登录 用户登录 用户名：  密   码：  验证码： 登 录ahref=Ferry 2）实现遮罩层和弹出登录界面的层的js文件Scripts/common.js的代码，注意，里面硬写了一些母版页Site.master中的元素的ID$(function()varscreenwidth,screenheight,mytop,getPosLeft,getPosTopscreenwidth=$(window).width();scr

5、eenheight=$(window).height();/获取滚动条距顶部的偏移mytop=$(document).scrollTop();/计算弹出层的leftgetPosLeft=screenwidth/2-200;/计算弹出层的topgetPosTop=screenheight/2-150;/css定位弹出层$(#divLoginWindow).css(left:getPosLeft,top:getPosTop);/当浏览器窗口大小改变时$(window).resize(function()screenwidth=$(window).width();screenheight=$(win

6、dow).height();mytop=$(document).scrollTop();getPosLeft=screenwidth/2-200;getPosTop=screenheight/2-150;$(#divLoginWindow).css(left:getPosLeft,top:getPosTop+mytop););/当拉动滚动条时，弹出层跟着移动$(window).scroll(function()screenwidth=$(window).width();screenheight=$(window).height();mytop=$(document).scrollTop();g

7、etPosLeft=screenwidth/2-200;getPosTop=screenheight/2-150;$(#divLoginWindow).css(left:getPosLeft,top:getPosTop+mytop););/点击链接弹出登录窗口$(#popup).click(function()$(#divLoginWindow).fadeIn(slow);/toggle(slow);$(#txtUserName).focus();/获取页面文档的高度vardocheight=$(document).height();/追加一个层，使背景变灰$(body).append();$(#greybackground).css(opacity:0.5,height:docheight);returnfalse;);/点击关闭按钮$(#closeBtn