有的时候需要显示一个蒙版层，蒙版层显示的主要原理是在指定元素比如div上创建一个子元素div，设置absolute、宽高100%、设置z-index置于顶层，设置半透明效果，fadein,fadeout即可。如下一段简单代码即可实现。

 <body>

    <div>这是mask界面显示代码</div>

    <div id="test" style="background-color:#124567;color:white;width:100px">点击弹出</div>

    <script type="text/javascript">

      function showMask()

      {

        var topWin=(function(){ var p=window.parent; while(p!=p.window.parent){p=p.window.parent;} return p; })();//获取顶层窗口

        var topwindowbody=topWin.document.body;//获取顶层窗口的body元素

        $(topwindowbody).append(

          '<div class="jgui-mask" style="position:absolute;width: 100%;height: 100%;;z-index:1000;background-color: #000;opacity: 0;"></div>'

        );

        $(".jgui-mask",topwindowbody).fadeIn(0, function(){//显示

          $(this).fadeTo('fast', 0.5);//从全透明到半透明

        });

        $(".jgui-mask",topwindowbody)

            .unbind("click")

            .click(function() {

              $(this).fadeOut("fast", 0, function() {//隐藏

                $(this).remove();

              });

            });

      }

      $(function() {

        $("#test").click(function() {

          showMask();

        });

      });

    </script>

  </body>

程序界面如下

点击弹出即可弹出遮罩层，再点击就会关闭。

演示：www.jgui.com

JGUI源码：实现蒙版层显示(18)的更多相关文章

  1. JGUI源码：从头开始，建一个自己的UI框架（1）

    开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...

  2. JGUI源码：鼠标中键滚动再次优化(5)

    //电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...

  3. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  4. JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  5. netty源码解解析(4.0)-18 ChannelHandler: codec--编解码框架

    编解码框架和一些常用的实现位于io.netty.handler.codec包中. 编解码框架包含两部分:Byte流和特定类型数据之间的编解码,也叫序列化和反序列化.不类型数据之间的转换. 下图是编解码 ...

  6. JGUI源码：实现日期控件显示(17)

    本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起 ...

  7. JGUI源码：右键菜单实现(12)

    1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else i ...

  8. JGUI源码：实现简单进度条(19)

    程序效果如下 实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装 <style> .jgui-proce ...

  9. JGUI源码：Tip实现（14）

    tip是当鼠标放到控件上显示的提示文本,下面说下实现思路方法一: 使用hover:before,hover:after组合一个三角符号和一个圆角矩形实现,以右三角为例 .jgui-tip:after ...

随机推荐

  1. 『cURL』curl: (6) Could not resolve host无法解析主机地址

    最近在学数据挖掘时,获取数据有两种途径: 开放数据,可以直接使用和存储的数据: 网络数据,通过爬虫或云市场api(付费或免费)获取数据 我通过教程,在阿里云购买一个天气数据api,尝试使用cURL获取 ...

  2. nginx笔记----解决windows80端口被iis占用

    打开注册表:regedit HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\HTTP 数值数据修改成0或者其他 然后重启

  3. 猴子吃桃儿问题（C#）

    猴子第一天摘了许多个桃子,先吃了所有桃子的一半,后又吃了一个:第二天又吃了剩下桃子的一半,后又吃了一个……第十天,剩1个桃子.问:猴子第一天摘了多少个桃子? 本程序对其做了修改,天数和吃一半后又吃了一 ...

  4. asp.net的Request.ServerVariables参数说明

    Request.ServerVariables["SERVER_NAME"] '获取服务器IPRequest.ServerVariables["HTTP_REFERER& ...

  5. 安装mysql8.0.12

    安装mysql8.0.12 https://blog.csdn.net/zwj1030711290/article/details/80039780 问题1:忘记记录日志打印的密码就把窗口给关了 解决 ...

  6. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

  7. 解决RSA加密中，System.Security.Cryptography.CryptographicException: 系统找不到指定的文件

    首先说下环境,win2008R2,iis7.5 遇到这个问题,困扰了我一天,在外国的网站上找到答案,还好有点英文基础.最后算是解决了,不过其中的原理还是没有搞的十分清楚. 先说下解决办法, 打开IIS ...

  8. Thymeleaf入门（一）——入门与基本概述

    一.概述 1.是什么 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP . 2.feature 1.Thymeleaf 在有网络和 ...

  9. [解读REST] 3.基于网络应用的架构

    链接上文[解读REST] 2.REST用来干什么的?,上文中解释到什么是架构风格和应该以怎样的视角来理解REST(Web的架构风格).本篇来介绍一组自洽的术语,用它来描述和解释软件架构:以及列举下对于 ...

  10. Linux系统安装jdk教程

    本文仅仅适用于刚刚接触Linux系统的童鞋,毕竟本人也才刚刚玩这个东西,在此记录下以便于以后能查阅及其他童鞋能进行参考,本文为原创随笔,如需转发,请标明出处,谢谢: 此处我采用的是用VMware搭建的 ...