书签 分享 收藏 举报 版权申诉 / 11
立即下载 加入VIP,免费下载
当前位置： 首页 > 工作范文 > 行政公文 > 遮罩.docx

类型遮罩.docx

  • 文档编号：27298275
  • 上传时间：2023-06-28
  • 格式：DOCX
  • 页数：11
  • 大小：24.26KB

            

            

 #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>

    

    

        

            

                  

                 FlyNoteBook

            

            

                登录

                

            

            

                

Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"

                    IncludeStyleBlock="false" Orientation="Horizontal">

                    

                        

MenuItem NavigateUrl="~/Default.aspx" Text="首页" />

                        

MenuItem NavigateUrl="~/About.aspx" Text="关于" />

                    

                

Menu>

            

        

        

--登录窗口:

Begin-->

        

            

 100%;" border="0" cellpadding="2" cellspacing="0">

                

 #e0f3d9; border-bottom:

 #bfe5b3 solid 2px">

                    

 38px; width:

 100px;">

                         用户登录

                    

                    

                        

                    

                

                

                    

 5px;">

                    

                

                

                    

                         用户名：

                    

                    

                         

TextBox ID="txtUserName" runat="server">

TextBox>

                    

                

                

                    

                         密   码：

                    

                    

                         

TextBox ID="txtPassword" TextMode="Password" runat="server">

TextBox>

                    

                

                

                    

                         验证码：

                    

                    

                         

TextBox ID="txtCode" Style="width:

 88px;" runat="server">

TextBox>

                        

 middle;" onclick="ChangeCode（this）;"

                            alt="验证码" title="看不清，点击图片更换图片" />

                    

                

                

                    

                        登 录

                        

                        

                        

                    

                

            

        

        

--登录窗口:

End-->

        

            

ContentPlaceHolder ID="MainContent" runat="server" />

        

        

        

    

    

        

    

    

   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

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
遮罩
提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：遮罩.docx
链接地址：https://www.bdocx.com/doc/27298275.html
相关搜索
遮罩

热门标签

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部