遮罩.docx
《遮罩.docx》由会员分享,可在线阅读,更多相关《遮罩.docx(11页珍藏版)》请在冰豆网上搜索。
遮罩
Jacob-激情程序人生
一个热爱IT,衷于互联网的程序猿……
2012-06-1316:
32
Jquery实现遮罩层效果、遮罩层的各个部分样式
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);">
#8FB0D1; width:
300px; height:
142px; z-index:
1002; left:
360px; top:
30px; position:
absolute; padding:
6px; display:
block;">
<%--onmouseover="isOut=false" onmouseout="isOut=true" onmousedown="m(this.id)"--%>
10px none Black; width:
100%; height:
100%; background-color:
#D6E4F2;">
move; background-color:
#EBF3F7; height:
2em; line-height:
2em; overflow:
hidden;" class="TBtitle">
请选择发送时间
'yyyy-MM-dd HH:
mm:
ss'})" style="width:
150px;">
ASPxButton ID="DbtnSubmit" runat="server" Text="确定" style="height: 22px; width: 60px; float: left;" CssFilePath="~/App_Themes/Office2010Blue/{0}/styles.css" CssPostfix="Office2010Blue" SpriteCssFilePath="~/App_Themes/Office2010Blue/{0}/sprite.css" onclick="DbtnSubmit_Click"> ASPxButton> |
ASPxButton ID="DbtnCancel" runat="server" Text="取消" style="height: 22px; width: 60px;" CssFilePath="~/App_Themes/Office2010Blue/{0}/styles.css" CssPostfix="Office2010Blue" SpriteCssFilePath="~/App_Themes/Office2010Blue/{0}/sprite.css" AutoPostBack="False"> ASPxButton> |
<%--
22px; width:
60px;" type="submit">--%>
<%----%>
遮罩层的背景主要样式:
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)
JQuery遮罩层登录界面实现(AJAX实现登录验证)
Admin
2010年8月11日
名人名言:
思想好比火星:
一颗火星会点燃另一颗火星。
一个深思熟虑的教师和班主任,总是力求在集体中创造一种共同热爱科学和渴求知识的气氛,使智力兴趣成为一些线索,以其真挚的、复杂的关系——即思信的相互关系把一个个的学生连接在一起。
——苏霍姆林斯基
JQuery遮罩层登录界面实现(AJAX实现登录验证)
操作系统:
Windwos7Ultimate
开发工具:
VisualStudio2010
数据库:
SqlServer2005
测试浏览器:
IE8、FF3.6.8、GoogleChrome(IE8中弹出登录层后会出现竖拉条,其他两种没有出现)
1、预览
1)登录前
2)点击登录显示登录窗口(层),同时用一个灰色透明层遮罩主窗体内容,点击【登录】,隐藏【登录】,显示loading图,登录失败,显示【登录】,隐藏登录图,同时显示提示信息
3)登录成功后,去掉去掉遮罩层和登录层,显示“xxx,您好!
”
2、实现
使用VS2010创建一个WebSite,此功能是在母版页Site.master中实现的。
VS2010会自动添加JQuery的js文件到Scripts文件夹,并创建一个母版页和基于此母版页的Default.aspx和About.aspx两个窗体。
1)登录层界面设计,看Site.master中的代码
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//www.w3.org/1999/xhtml" xml:
lang="en">
FlyNoteBook
ContentPlaceHolder ID="HeadContent" runat="server">
ContentPlaceHolder>
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 });
});
//当拉动滚动条时,弹出层跟着移动
$(window).scroll(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 });
});
//点击链接弹出登录窗口
$("#popup").click(function () {
$("#divLoginWindow").fadeIn("slow"); //toggle("slow");
$("#txtUserName").focus();
//获取页面文档的高度
var docheight = $(document).height();
//追加一个层,使背景变灰
$("body").append("
");
$("#greybackground").css({ "opacity":
"0.5", "height":
docheight });
return false;
});
//点击关闭按钮
$("#closeBtn