jquery实现登录成功界面

作者：管理员

发布时间：2021/6/7 15:11:11

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=4890

　　1、预览


　　1）登录前


　　2）点击登录显示登录窗口（层），同时用一个灰色透明层遮罩主窗体内容，点击【登录】，隐藏【登录】，显示loading图，登录失败，显示【登录】，隐藏登录图，同时显示提示信息


　　3）登录成功后，去掉去掉遮罩层和登录层，显示“xxx，您好！ ”


　　2、实现


　　使用VS2010创建一个Web Site，此功能是在母版页Site.master中实现的。VS2010会自动添加JQuery的js文件到Scripts文件夹，并创建一个母版页和基于此母版页的Default.aspx和About.aspx两个窗体。


　　1）登录层界面设计，看Site.master中的代码


　　FlyNoteBook


　　2）实现遮罩层和弹出登录界面的层的js文件Scripts/common.js的代码，注意，里面硬写了一些母版页Site.master中的元素的ID


　　$（function （） {


　　var screenwidth, screenheight, mytop, getPosLeft, getPosTop


　　screenwidth=$（window）。width（）;


　　screenheight=$（window）。height（）;


　　//获取滚动条距顶部的偏移


　　mytop=$（document）。scrollTop（）;


　　//计算弹出层的left


　　getPosLeft=screenwidth / 2 - 200;


　　//计算弹出层的top


　　getPosTop=screenheight / 2 - 150;


　　//css定位弹出层


　　$（"#divLoginWindow"）。css（{ "left": getPosLeft, "top": getPosTop }）;


　　//当浏览器窗口大小改变时


　　$（window）。resize（function （） {


　　screenwidth=$（window）。width（）;


　　screenheight=$（window）。height（）;


　　mytop=$（document）。scrollTop（）;


　　getPosLeft=screenwidth / 2 - 200;


　　getPosTop=screenheight / 2 - 150;


　　$（"#divLoginWindow"）。css（{ "left": getPosLeft, "top": getPosTop + mytop }）;


　　}）;






关键字：CSS