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动态追加页面数据以及事件委托详解
May 06 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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
简单的页面缓冲技术
2006/10/09 PHP
PHP5 安装方法
2007/01/15 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python高级用法总结
2018/05/26 Python
python递归全排列实现方法
2018/08/18 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
应聘自荐书
2013/10/08 职场文书
营业经理岗位职责
2013/11/10 职场文书
绿化工程实施方案
2014/03/17 职场文书
抽奖活动主持词
2014/03/31 职场文书
团拜会策划方案
2014/06/07 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Python实现科学占卜 让视频自动打码
2022/04/09 Python