jQuery实现的页面遮罩层功能示例【测试可用】


Posted in jQuery onOctober 14, 2017

本文实例讲述了jQuery实现的页面遮罩层功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="description" content="aportpower"/>
    <title>3water.com 遮罩层</title>
    <style type="text/css">
      .fh-link-bar {
        border-top: none;
      }
      .fh-link-bar {
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-left: none;
        border-right: none;
        padding: 10px;
        height: 50px;
        line-height: 30px;
        font-size: 14px;
      }
      #personsex{
        float: right;
      }
      .personsex {
        background: magenta;
        width: 150px;
        height: 180px;
        line-height: 40px;
        text-align: center;
        border-radius: 2px;
        z-index: 104;  /*层级关系为104*/
        /*只是用来控制位置的*/
        position: absolute;
        margin: 100px auto;
        font-size: 20px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      /*一定要记得添加样式(必须)*/
      .loading-shade {
        position: fixed;  /*窗口定位*/
        background: rgba(0,0,0,.5);  /*遮罩层的颜色*/
        z-index: 102;      /*层级关系为102*/
      }
      .loading-shade{
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <!--页面上原先有的内容(用来执行点击)-->
    <section class="fh-link-bar" id="sexlog">
         <span>性别</span>
        <span class="fh-data" id="personsex">男</span>
    </section>
    <!--页面上原先没有的内容(用来执行点击后生成的提示框)-->
    <div class="personsex" style="display: none;">
      <p>保密</p>
      <p>男</p>
      <p>女</p>
    </div>
  </body>
  <script src="jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    //添加页面遮罩
    function addShade() {
      var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
      $("body").append('<div class="loading-shade"></div>');
      //$(".loading-shade").css("height",htmlHeight+"px");
      $(".loading-shade").css("100%");
    }/*删除页面遮罩*/
    function removeShade() {
      $(".loading-shade").remove();
    }
    /*页面遮罩点击关闭弹出层
     * dom=>#id
     * type => hide || remove
     * */
    function closeDiv(dom, type) {
      $(".loading-shade").click(function() {
        type == "hide" ? $(dom).hide() : $(dom).remove();
        $(".loading-shade").remove();
      })
    }
    //需要调用的页面添加的js(这里是点击上边的div(即:.personsex p元素)的时候实现遮罩层消失。)
//   $('#sexlog,#personsex').unbind("click").bind("click",function(){
//      addShade();
//      $('.personsex').show();
//   });
//
//   $('.personsex p').bind('click',function(){
//      $('.loading-shade').remove();
//      $('.personsex').hide();
//   });
    //======================================================================================
    //需要调用的页面添加的js(这里是点击遮罩层实现遮罩层(即:.loading-shade)页面关闭)
     $('#sexlog,#personsex').unbind("click").bind("click",function(){
       addShade();
       $('.personsex').show();
       del();
    });
    function del(){
       $('.loading-shade').bind('click',function(){
         $('.loading-shade').remove();
         $('.personsex').hide();
      });
    }
  </script>
</html>

运行效果:

jQuery实现的页面遮罩层功能示例【测试可用】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 #jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 #jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
You might like
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
python2.7安装图文教程
2018/03/13 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
django连接oracle时setting 配置方法
2019/08/29 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
解决c++调用python中文乱码问题
2020/07/29 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
捐助贫困学生倡议书
2014/05/16 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
九一八事变演讲稿
2014/09/05 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL