通用写法: mini.mask({   el:document.body(作用对象) cls:样式 hetml:显示文本 }) 我的问题是,当前页面的遮罩无效不会显示,但是页面不能点击 问题原因,ajax请求指定了 asyn:false即同步请求 这下明白了,同步请求尚未完成返回时,当前页面会进入假死状态,遮罩自然不会生效 问题简单,但是由于经验不丰富,未能及时发现问题所在.

今天把页面遮罩的效果发一下,之前遮罩都是用JS实现的,忽然发现CSS3里面的box-shadow属性除了做立体阴影外,还可以做页面的遮罩. 下面来看一下完成的动态效果: 从上图可以看出,就是当鼠标悬浮在按钮上时,会出现整个页面的遮罩,当然调一下透明度就是网页中经常看到的当鼠标悬浮在一张图片上时,周围的其他图片都被遮罩了,这样就达到了突出这张图片的效果,其实这个效果做出来很简单. 一.主体程序: <!DOCTYPE html> <html> <head> <meta

一.问题场景 最近在做数据统计功能,需求是导出大数据量的excel,时间间隔较长,大概需要十秒左右,点击导出后,页面没有做任何处理,用户也不知道是否正在导出:如果没有做交互上的限制,用户可以一直点击导出按钮,这样势必会造成服务器瘫痪. 二.尝试过程 花了一天尝试了两种方案: 2.1 纯前端添加遮罩 单纯的前端是无法监听文件是否下载完成的,主要试了两种方案: 1.由于导出是用form表单提交的,并将form的target设置到一个隐藏iframe来达到不刷新页面而导出.本来想利用隐藏iframe的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DIV CSS遮罩层</title&

在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动 此处就是要在显示遮罩的时候禁止下层滚动. 首先设置一个全局变量 var canScroll=false; 页面初始化的时候添加事件监听 document.addEventListener('touchmove',function(e){             if(!canScroll){                 e.preventDefault()             }         })

实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading directive */ angular.module('bet.loading', []) .directive('loading', loading); function loading() { return { restrict: 'E', transclude: true, template: '<

实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为:hidden 废话不多说了,将关键代码贴出来了,兼容火狐,谷歌,ie 遮罩层的样式代码,红色部分是关键的部分 复制代码代码如下: .cover {position:fixed; top: 0px; right:0px; bottom:0px;filter: alpha(opacity=60); z-index: 1002; left: 0px; display:none;opacity:0

<style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5px; text-align:center; background:#fff; padding:15px; } .line_bak{ height:35px; line-height:35px; text-align:center; } .bak{ position:fixed; top:0; left:0;

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为. 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/ 用法很简单,组织用户对页面的交互: $.

cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.getBusyOverlay(id, overlay, busy) 为遮罩层的方法, id:需要写viewport,详情请看Js内部. overlay:主要是遮罩层的样式,遮罩层显示字体的样式. busy:加载进度圈的样式. 2.xval.settext("正在登录,请稍后......");

在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置Webview窗口的遮罩层. mask属性值为字符串类型,可取值: rgba字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)": “none",表示不使用遮罩层. Webview的遮罩层会覆盖Webview中所有内容(包括子Webview),并且截获Webview窗口的所有触屏事

——————页面遮罩(CSS+JS+HTML)—————— HTML: <div id="mask" class="mask"></div> CSS: /***********- 遮罩层 -***********/ #mask{ position: absolute; top: 0px; left:0px; background:#333; opacity:0.5; /* older safari/Chrome browsers */ -we

在页面进行后台数据库操作的时候,不想 用户再进行 页面上的 其他操作,这时候就要 将页面 遮罩.例如UniDBGrid有LoadMask属性. 1]使用ScreenMask函数 2]JS调用 3]一个控件控制遮罩另一个控件(如Button遮罩UniDBGrid) //很简单,本例子就是告诉大家如何在程序忙碌时弹出一个“请等待...”的提示. YourForm.ShowMask('请等待...'); UniSession.Synchronize(); . . . YourForm.HideMask

一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 left: 0; 距离左边0像素 top: 0; 距离上边0像素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

× 目录 [1]跟随图标 [2]视频提示 [3]下拉菜单[4]边缘对齐[5]星号 [6]全屏适应[7]半区翻图[8]九宫格[9]等高布局[10]整体布局 前面的话 之前的博客文章已经详细介绍过绝对定位的基础知识,由于它的用途实在广泛,于是单独为其写这篇关于其应用的博客.关于绝对定位的基础知识移步至此 静态位置 当元素绝对定位后,若该元素的格式化属性不发生变化,则该元素处于静态位置.关于绝对定位元素格式化的相关内容移步至此.元素的静态位置是指元素在正常流中原本的位置,更确切的讲,顶端的静态位置是从

平时我们想要显示一些提示信息时会用到alert方法,alert是全局的一个方法,会短暂的中断程序,我们主要用来显示提示客户信息.但是这个方法有一定的局限性,而且本身样式也不够美观.于是我封装了一个实用的插件,我们封装的MyAlert实现了alert方法的功能,与系统的alert不同的地方在于MyAlert可根据用户的需要来决定是否进行下一步的操作. 代码很简单,只有28行,封装的很好,放在那里都可以应用.封装的时候考虑了两点要素: 1.我们不能中断程序的进程,于是加了一个遮罩放在body上面,注

场景:新开发的功能内测,新调用了其它模块的接口,一如既往的点鼠标,计费,但是许久都没有响应页面遮罩一直锁着,最后抛出了以下异常 咋一看这个异常信息,不就是锁表了吗?把锁表进程Kill掉,再来一遍,结果还是同样的异常,锁表的异常只是最终的结果,是什么导致的锁表呢? 于是到JBoss服务器寻求更多的异常信息,找到线索. 查看JBoss服务器日志发现了内存溢出的情况,查看堆栈信息发现在业务代码的78行, StringBuilder在进行append时,出现的异常.转移突破点,分析代码: 先给大家提一个

1. ul li中上图下字,图片.文字居中. <ul> <li> <img src="dash.png" style="display:block;height:20px;width:20px;margin: 0 auto"> <span style="float:left;text-align:center;">Dashboard</span> </li> </ul&

1.搭配iframe  子页面遮罩层 覆盖父页面 window.parent.layer.open({      // type: 1, //skin: 'layui-layer-rim', //加上边框 //area: ['420px', '240px'], //宽高 //content: '<table border="0" cellspacing="0" cellpadding="0"><tr><th>H

全页面遮罩效果loading css: .loading_shade { position: fixed; left:; top:; width: 100%; height: 100%; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; background: rgba(255,255,255,.7); z-index: 99 } .loading_box { padding: 30px; box