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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 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
php 删除数组元素
2009/01/16 PHP
php的memcached客户端memcached
2011/06/14 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
CI框架常用函数封装实例
2016/11/21 PHP
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python剪切视频与合并视频的实现
2020/03/03 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
领导干部四风问题自我剖析材料
2014/09/25 职场文书
白酒代理协议书范本
2014/10/26 职场文书
计生个人工作总结
2015/02/28 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL