JGUI源码:实现蒙版层显示(18)
有的时候需要显示一个蒙版层,蒙版层显示的主要原理是在指定元素比如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)的更多相关文章
- JGUI源码:从头开始,建一个自己的UI框架(1)
开篇 1.JGUI是为了逼迫自己研究底层点的前端技术而做的框架,之前对web底层实现一直没有深入研究,有了技术瓶颈,痛定思痛从头研究, 2.虽然现在vue技术比较火,但还在发展阶段,暂时先使用JQue ...
- JGUI源码:鼠标中键滚动再次优化(5)
//电脑端中键滚动事件 var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- JGUI源码:Accordion鼠标中键滚动和手机端滑动实现(2)
本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...
- netty源码解解析(4.0)-18 ChannelHandler: codec--编解码框架
编解码框架和一些常用的实现位于io.netty.handler.codec包中. 编解码框架包含两部分:Byte流和特定类型数据之间的编解码,也叫序列化和反序列化.不类型数据之间的转换. 下图是编解码 ...
- JGUI源码:实现日期控件显示(17)
本文实现一个日期控件显示,日期控件看起来很复杂,其实原理很简单,大部分情况下我们直接使用别人做得好的日期控件就行,但有时候特殊需求,比如显示提醒之类的,恐怕第三方控件就不好实现了, 为了使程序逻辑看起 ...
- JGUI源码:右键菜单实现(12)
1.要想实现右键菜单,就要先能响应右键函数 $('#down').mousedown(function(e){ if(3 == e.which){ alert('这是右键单击事件'); }else i ...
- JGUI源码:实现简单进度条(19)
程序效果如下 实现进度条动画主要有两种方法:(1)使用缓动,(2)使用Jquery Animate,本文使用第二种方法,先实现代码,后续进行控件封装 <style> .jgui-proce ...
- JGUI源码:Tip实现(14)
tip是当鼠标放到控件上显示的提示文本,下面说下实现思路方法一: 使用hover:before,hover:after组合一个三角符号和一个圆角矩形实现,以右三角为例 .jgui-tip:after ...
随机推荐
- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?
<!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...
- 【spring源码分析】IOC容器初始化(五)
前言:前几篇文章已经将BeanDefinition的加载过程大致分析完成,接下来继续分析其他过程. AbstractApplicationContext#refresh public void ref ...
- 014_zk路径过滤分析
一.线上zk访问延迟特别高需要统计一段时间内的zk写入路径top10,实现如下: #!/usr/bin/env python # -*- coding:utf-8 -*- import re,trac ...
- linux下安装多个Tomcat
编辑环境变量:vi /etc/profile 加入以下代码 ##########first tomcat########### CATALINA_BASE=/usr/local/src/tomcat ...
- Python--day08(文件操作)
昨天内容回顾 1. 数据类型转换 1. 数字类型:数字类型之间可以直接 类型()进行直接转换 2. str与int类型:int() 与str() 之间在某些条件下可以直接转换 int('10' ...
- 周末学习笔记——day02(带参装饰器,wraps修改文档注释,三元表达式,列表字典推导式,迭代器,生成器,枚举对象,递归)
一,复习 ''' 1.函数的参数:实参与形参 形参:定义函数()中出现的参数 实参:调用函数()中出现的参数 形参拿到实参的值,如果整体赋值(自己改变存放值的地址),实参不会改变,(可变类型)如果修改 ...
- Spring Boot与缓存
---恢复内容开始--- JSR-107.Spring缓存抽象.整合Redis 一.JSR107 Java Caching定义了5个核心接口,分别是CachingProvider, CacheMana ...
- (light oj 1102) Problem Makes Problem (组合数 + 乘法逆元)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1102 As I am fond of making easier problems, ...
- MySQL-悲观锁和乐观锁
引言 悲观锁和乐观锁指的并不是一种锁,而是一种思想,一种并发控制的方法. 在事务并发执行的情景中,可能存在多个用户同时更新同一条数据的情况,这可能会产生冲突导致丢失更新或者脏读. 丢失更新是指一个事 ...
- LeetCode33—搜索旋转排序数组
方法一:先找到旋转点,然后根据目标值重新确定二分查找区域. 时间复杂度:用到两次二分查找,每次二分查找粗略的认为是O(logn),那么时间复杂度为2 * O(logn): 空间复杂度:O(1). in ...