JavaScript,封装库--遮罩锁屏

封装库新增1个方法

/** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块
* 注意:一般需要在css文件将元素设置成隐藏
**/
feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () {
if (this.jie_dian.length == 1) {
var yan_su = null;
for (var i = 0; i < this.jie_dian.length; i++) {
yan_su = this.jie_dian[i];
}
var chang_w = getInner().width; //getInner()函数库函数,跨浏览器获取浏览器视窗大小
var chang_h = getInner().height;
yan_su.style.width = chang_w + 'px';
yan_su.style.height = chang_h + 'px';
yan_su.style.position = 'absolute';
yan_su.style.top = '0';
yan_su.style.left = '0';
} else {
alert("遮罩锁屏区块,只能设置一个区块元素,目前jie_dian数组里是多个元素请检查!")
}
return this;
};

遮罩锁屏

html代码

<div id="suo_ping"></div>

css代码

/*遮罩锁屏区块*/
#suo_ping{
z-index:; /*注意:如果遮罩层上面有元素,它的层级要大于9998*/
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
display: none;
}

前台js代码

//弹出登录框加遮罩锁屏
//获取登录框,执行将登录框居中方法,执行浏览器窗口事件方法
$().huo_qu_id('login').yuan_su_ju_zhong().chuang_kou_shi_jian(function () {
//获取登录框,执行将登录框居中方法
$().huo_qu_id('login').yuan_su_ju_zhong();
//获取遮罩锁屏元素,执行遮罩锁屏方法
$().huo_qu_id('suo_ping').zhe_zhao_suo_ping();
});
//获取登录元素节点,执行点击事件方法
$().huo_qu_class('deng_lu').on_click(function () {
//获取登录框,改变css
$().huo_qu_id('login').xian_shi();
//获取遮罩锁屏元素,执行显示方法,执行遮罩锁屏方法
$().huo_qu_id('suo_ping').xian_shi().zhe_zhao_suo_ping();
});
//获取登录框里的关闭元素,执行点击事件方法
$().huo_qu_class('close').on_click(function () {
//获取登录框,改变css
$().huo_qu_id('login').yin_cang();
//获取遮罩锁屏元素,执行隐藏方法
$().huo_qu_id('suo_ping').yin_cang();
});

第一百三十四节,JavaScript,封装库--遮罩锁屏的更多相关文章

  1. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十五节,封装库--JavaScript,轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  3. 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据

    封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...

  4. 第一百五十六节,封装库--JavaScript,延迟加载

    封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...

  5. 第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息

    第三百三十四节,web爬虫讲解2—Scrapy框架爬虫—Scrapy爬取百度新闻,爬取Ajax动态生成的信息 crapy爬取百度新闻,爬取Ajax动态生成的信息,抓取百度新闻首页的新闻rul地址 有多 ...

  6. 第一百三十九节,JavaScript,封装库--CSS选择器

    JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...

  7. 第一百三十五节,JavaScript,封装库--拖拽

    JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...

  8. 第一百三十六节,JavaScript,封装库--事件绑定

    JavaScript,封装库--事件绑定 在函数库添加两个函数 添加事件绑定函数 删除事件绑定函数 添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时 ...

  9. 第一百三十三节,JavaScript,封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

随机推荐

  1. jquery 触屏滑动+定时滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. 【转】视差滚动(Parallax Scrolling)效果的原理和实现

    原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...

  3. Xamarin.Android

    Xamarin.Android之使用百度地图起始篇 一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的 ...

  4. 为ASP.NET MVC应用程序创建更复杂的数据模型

    为ASP.NET MVC应用程序创建更复杂的数据模型 2014-05-07 18:27 by Bce, 282 阅读, 1 评论, 收藏, 编辑 这是微软官方教程Getting Started wit ...

  5. MongoDB应用介绍之前

    MongoDb企业应用实战(一) 写在MongoDB应用介绍之前   故事背景: 本人有幸,经老友( 现为x知名快递公司技术总监 ) 推荐进入中国前三大民营快递公司之一工作,在此非常感谢他,在此也非常 ...

  6. poj2488骑士之旅

    题目大意:国际象棋里面的马,有那么8种跳法,然后题目给出一个棋盘的大小p*q, 求有没有路线可以使得这个马能把整个棋盘的格全部走一遍,有的话按照字典序将第一条路线打印出来. 注意:国际象棋是行是数字, ...

  7. Cassandra

    NoSQL之Cassandra   9月初听了一个讲座,演讲者是张月同学,他给我们分享了Cassandra nosql数据库,讲得很精彩,听完之后收益良多. Cassandra是一个noSQL数据库, ...

  8. SharePoint RBS 安装(集成Office Web Apps)

    前言 本文完全原创,转载请说明出处,希望对大家有用. 本篇博客是个人总结,一方面以便日后查看,另一方面希望能为其他人提供一些便利. 阅读目录 安装RBS 为多个内容数据库开启RBS 正文 目的:在Sh ...

  9. Power BI移动端应用

    随笔- 420  文章- 6  评论- 1927  无处不在的商业智能---Power BI移动端应用   此篇来自于微软商业智能网站的官方博客团队发布的Power BI在线资料其中的一部分,完整版地 ...

  10. 设计师和开发人员更快完成工作需求的20个惊人的jqury插件教程(上)

    [转] 设计师和开发人员更快完成工作需求的20个惊人的jqury插件教程(上) jquery的功能总是那么的强大,用他可以开发任何web和移动框架,在浏览器市场,他一直是占有重要的份额,今天,就给大家 ...