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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery实现聊天对话框
Feb 08 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中的一个中文字符串截取函数
2007/02/14 PHP
php中异常处理方法小结
2015/01/09 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
最新党员思想汇报
2014/01/01 职场文书
质量保证书怎么写
2015/02/27 职场文书
红高粱观后感
2015/06/10 职场文书
贫困生证明范文
2015/06/16 职场文书
Python基础之Socket通信原理
2021/04/22 Python