遮罩层 | 易学教程

jQuery实现带遮罩层的消息框滑入滑出效果

阅读更多关于 jQuery实现带遮罩层的消息框滑入滑出效果

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 首先，使用一个遮罩层来遮住整个页面，在遮罩层上显示一个消息框，消息框还可以被关闭，最后使用jQuery使得消息框从页面顶部滑下，实现的效果如下：遮罩层的样式如下： . overlay { background : transparent url ( images / overlay . png ) repeat top left ; position : fixed ; top : 0px ; bottom : 0px ; left : 0px ; right : 0px ; z - index : 100 ; } 样式说明了不论在哪种浏览器中，遮罩层上、右、下左边距都为0，保证了真正的遮罩。而position:fixed保存了当出现滚动条时，遮罩的完全，position:absolute不能满足这个要求，有兴趣的可以试试。过多的不解释了，不理解的也可以看看 CSS遮罩层这篇文章。下边样式用来显示消息框： . box { position : fixed ; top :- 200px ; left : 30 %; right : 30 %; background - color : #fff; color : #7F7F7F; padding : 20px ; border : 2px solid

JQuery 实现遮罩层

阅读更多关于 JQuery 实现遮罩层

1.样式如下设置： Js代码 <style type= "text/css" > .mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777; z-index: 1002; left: 0px; opacity:0.5; -moz-opacity:0.5; } </style> 其中： opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；你只需要都加上，便可以火狐和IE下都可以使用。 2.指定层的高度、和宽度。 Js代码 <script type= "text/javascript" > //兼容火狐、IE8 function showMask(){ $( "#mask" ).css( "height" ,$(document).height()); $( "#mask" ).css( "width" ,$(document).width()); $( "#mask" ).show(); } </script> 3.在<body>中加入如下代码，然后就可以看效果了： Html代码 < div id = "mask" class = "mask" > </ div > < a href = "javascript:;" onclick =

一个简单JS+CSS遮罩层的实现

阅读更多关于一个简单JS+CSS遮罩层的实现

遮罩层代码如下<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//www.jb51.net/" /> <title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title> <style type="text/css"> * { margin:0px; padding:0px; } .zhezhao { width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .login { width:280px; height:180px; position:absolute; top:200px; left:50%; background-color:#000; margin-left:-140px; display:none; z-index:1500; } .content { margin-top:50px; color:red; line-height:200px;

一个好看的WPF开源控件库——PanuonUI自定义样式控件库

阅读更多关于一个好看的WPF开源控件库——PanuonUI自定义样式控件库

PanuonUI 这是一个开源项目，版权归本喵所有。该开源项目遵循Apache2.0许可协议，简单点说就是不限制使用途径（商业也可以用），但不允许抄袭。 GitHub传送门： https://github.com/Ruris/PanuonUI 本开源库目前仍处于开发中，代码请自行克隆研究。本系列的博客是解说自定义依赖属性的。该库依旧在更新中，用的爽的话别忘了Star一下哈。目前已有的控件：（截止2018.5.10，共有7个） ScrollViewer Window、MessageBox Button、TextBox、CheckBox、RadiuButton 正在制作：PasswordBox、BarChart 项目内的控件浏览器程序使用了Caliburn.Micro作为解耦工具，看不懂也不会影响使用。除此之外，项目还使用了FontAwesome字体（嵌入在示例项目中）。（0）PUWindow 窗体控件这是一个融合了遮罩层、动画渐入渐出的窗体控件。 PanuonUI Browser是一个派生自PUWindow的窗体。如下图的示例所示，通过点击按钮打开一个PUMessageBox控件（该控件同样继承自PUWindow，并且调用该控件的窗口也必须为PUWindow，否则会抛出异常）。在使用PUMessageBox的时候不需要设置遮罩层

【转】遮罩层——通过阴影弱化背景的四种方案

阅读更多关于【转】遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1： /* 用于遮挡背景 */ .overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8); } /* 需要吸引用户注意的元素 */ .lightbox { position: absolute; z-index: 1; width: 40%; height: 140px; background-color: #FFF; margin-top: 10em; margin-left: 30%; } 缺点：需要增加一个额外的HTML元素。这意味着该效果无法由css单独实现。方法二：伪元素方案代码-2： body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0, 0.8); } 优点：相对灵活，可一满足绝大多数人对遮盖层的期望。缺点：可移植性还不够好，因为 <body> 元素上可能有其它需要占用 : :before 伪元素。需要一点JavaScript来给添加dimmed这个类。伪元素无法绑定独立的JavaScript事件处理函数。、方法三：box

HTML5+CSS3+jQuery实现弹出层

阅读更多关于 HTML5+CSS3+jQuery实现弹出层

文章来源于helloweba.com 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终做出来的弹出层效果应该是响应式的，也就是说可以在桌面PC端和移动端都可以很好展示的弹出层，并且是兼容现代浏览器的。在demo中，我使用了Bootstrap样式，当然你也可以自己写个样式来完成页面布局。一个基本的弹出层应该满足以下需求：点击按钮/链接触发弹出层，弹出层应该有半透明的遮罩层；点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层；使用Esc键也可以关闭弹出层；它是响应式的，并且兼容现代主流浏览器。 HTML 首先我们在页面放置一个用来触发弹出层的链接，也可以是个按钮button，注意的是我们给它设置一个data-show-layer属性，这个属性值对应的就是弹出层的id，也就是说通过data-show-layer来关联弹出层。 <a class="btn btn-info btn-lg show-layer" data-show-layer="hw-layer" role="button">点击弹出层</a> 很显然，上面的链接关联的弹出层的id是hw-layer。那好，选择我们来准备弹出层hw-layer的html代码。 <div class="hw-overlay" id=

elementUI中的loading

阅读更多关于 elementUI中的loading

先安装引入 import ElementUI from 'element-ui' import { Loading } from 'element-ui' 在vue的原型链上定义一个打开loading的方法 Vue.prototype.openLoading = function() { const loading = this.$loading({ // 声明一个loading对象 lock: true, // 是否锁屏 text: '正在加载...', // 加载动画的文字 spinner: 'el-icon-loading', // 引入的loading图标 background: 'rgba(0, 0, 0, 0.3)', // 背景颜色 target: '.sub-main', // 需要遮罩的区域 body: true, customClass: 'mask' // 遮罩层新增类名 }) setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题 loading.close(); // 关闭遮罩层 },5000) return loading; } 在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用 const rLoading = this

弹窗遮罩层原理及实现

阅读更多关于弹窗遮罩层原理及实现

一、说明：我们知道，如果在网页中需要加载一个弹窗时同常是不希望点击到弹窗以外的区域从而导致错误操作的。这个时候呢我们就可以使用遮罩层来实现弹窗外部区域屏蔽的功能。二、原理：在弹窗和页面之间创建一个div并使之铺满整个屏幕，同时让这个div半透明。这样我们就可以即能看到页面的内容，又无法点击到弹窗外的内容了。三、用到的技术： js控制display的属性值以及设置遮罩层opacity的值为0.3 （小于1就行）四、范例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遮罩层</title> <style> html,body { margin:0; height:100%; } #test { width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.3; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity=30); display:none; } #log_window { width:200px; height:200px; background-color:red; margin: auto; position:

遮罩层上弹窗滚动时禁止下层页面滚动的处理

阅读更多关于遮罩层上弹窗滚动时禁止下层页面滚动的处理

css的处理: html, body { height: 100%; } body{ position: relative; } /*遮罩层显示时body的样式*/ .notScroll { overflow: hidden; } /*遮罩层*/ .window_mask { position: fixed; top: 0 !important; } /*弹窗*/ .window_boundingBox { position: fixed !important; top: 50% !important; margin-top: -214px !important; z-index: 1001; width: 90%; left: 5%; background-color: rgb(232, 232, 232); border-radius: 3px; overflow: hidden; } /*弹窗中需要滚动的部分*/ .window_boundingBox .window_body { overflow: auto; webkit-overflow-scrolling: touch; line-height: 28px; font-size: 16px; padding: 5px 10px; height: 242px; overflow-y: auto; -webkit

element-ui遮罩层el-dialog的使用

阅读更多关于 element-ui遮罩层el-dialog的使用

template <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" :close-on-click-modal="false"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="dialogVisible = false">确定</el-button> </span> </el-dialog> data dialogVisible:false, methods closeShadow(){ this.dialogVisible=false; }, handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); } 更多api参照官网：

订阅遮罩层