前端设置遮罩层刷新后页面变白

2024-09-02

页面用一个遮罩层显示加载，加载完后隐藏该div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "><img src="/content/5-12120419410

vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据sessionstorage的特性,做一下各个方法的封装: const ls = window.sessionStorage; export default { getItem(key) { try { return JSON.parse(ls.getItem(key)); } catch (err) { ret

Struts2 利用AJAX 导出大数据设置遮罩层

Struts2 利用AJAX 导出大数据设置遮罩层需求背景: 每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃.所以我么我们需要通过进度条方式告知客户导出的进度.通过在导出过程中循环请求后台确认时候导出完毕来控制遮罩层在某个时候关闭. 解决办法: 之前反复用了N种方式都没有解决类似问题, 1.iframe 方式最终拜拜 2.ajax 方式 ajax

Webview窗口设置遮罩层

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

直击根源：微信小程序中web-view再次刷新后页面需要退两次

背景在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面问题描述在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面. 解决方案首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去:,经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能. 在寻找资料时,发现可以间接的触发一个unl

解决 cocos2dx iOS/mac 设置纹理寻址模式后纹理变黑的问题

sprite:getTexture():setTexParameters(gl.LINEAR,gl.LINEAR,gl.REPEAT,gl.REPEAT) 在安卓设备上,设置了纹理自定义寻址模式,纹理图片的宽高大小可以任意设置,但在ios或者mac设备上,纹理图片的大小一定要是2的n次方,不然渲染出来的精灵就会成黑色.

[COCOS2DX-LUA]0-006.cocos2dx中关于拖动屏幕物件，同时点击home键，返回后页面变黑的问题。

基本信息介绍: 引擎框架: Quick-Cocos2dx-Community-3.6 测试机型: 魅族MX5 问题简介: 有拖动效果的物件,在拖动的工程中,手指不放,同时点击home键退到后台. 再返回应用,发现onTouchEnded里头有添加精灵的话,会变黑色. 问题排查: 首先排查生命周期.因为属于点击会被打断,会执行onTouchCancelled.所以真机调试发现先执行了onPause事件,再执行了onTouchCancelled. 这2个时间有一定的间隔时间,导致图片没加载进内存,但

遮罩层出现后不能滚动添加事件@touchmove.prevent

Z遮罩层完全覆盖页面

不要使用absolute定位,用fixed就行.然后 background:rgba(0, 0, 0, 0.5); position:fixed; z-index: 100; left:0; right:0; top:0; bottom:0;

在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示或隐藏. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

纯js制作遮罩层对话框 -- g皓皓

//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> func

简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

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("正在登录,请稍后......");

Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- /*弹出遮罩层*/ 第一步:初始化遮罩层的基本属性,将其相对于浏览器窗口定位,将其尺寸缩放为0 第二步:设置遮罩层的高度,以便弹出式覆盖整个浏览器窗口第三步:通过点击事件给遮罩层添加弹出动画类 /*固定宽高盒子上下左右居于不定宽高容器正中*/ 第一步:设置待定位盒子和宽高值第二步:将待定位盒子pos

css实现遮罩层，父div透明，子div不透明

使用元素的opacity 属性,设置遮罩层的效果, 主要样式是:background-color: #ooo; opacity:0.3; <div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;opacity:0.3;text-align:center"> <div style="float:right; width:100px;height:

移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究

PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性. 要制作这个效果在PC端非常简单,只需要设置html的高度为100%占满屏幕,并且将html的overflow设置为hidden,即可保证页面不可滚动. 但是同样的问题在移动端情况就有所区别.仅仅设置html的上列属性,在移动端仍然无法禁止页面超出部分的滚动,我们

z-index设置后导致遮罩层显示跳动问题

如图,1,3为top,bottom div,2为iscroll,4为遮罩层,如果1设置z-index后,不设置遮挡不住2,遮罩层4弹出会卡顿,既不设置z-index,又能遮挡iscroll的办法是在html里先写2,再写1,3,设置1的top为0这样同样是z-index为0,起到1也能遮挡住2,效果. 后来发现在2外面设置overflow:auto也是可以的,之前一种方法在ios浏览器上有问题.

在iframe内页面完全加载完后，关闭父页面生成的div遮罩层

遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数此段代码在iframe页面内: <script> $(function () { window.parent.alertMsgClose();// iframe 外层页面关闭遮罩层 }); </script>

Layer弹出层关闭后刷新父页面

API地址:http://layer.layui.com/api.html#end 调用END回调方法: end - 层销毁后触发的回调类型:Function,默认:null 无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数. function updateStock(id) { //iframe层 parent.layer.open({ type: 2, title: '修改', shadeClose: false, //点击遮罩关闭 shade: 0.8, area: [

史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中总结

史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经

使用layer的弹窗时，出现layer引入成功，触发成功，控制台无报错，但是页面无变化或者仅出现遮罩层的问题的解决思路

------------------------------------------20180410补充--------------------------------------------------------------------------------------------- 今天发现,原来不需要调整的layer弹窗也无法弹出了, 对比了代码版本,发现是因为今天调试代码的时候用了dump打印数据紧接着我又试了下 echo ,print_r ,var_dump等输出打印形式发现

解决iframe作为子窗口，刷新后iframe页面跳转到其它页面的问题

转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分. 好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面. (2)加载的资源要少,所以用时更少,而且消耗服务器的流量会少一点. (3)统一管理菜单内容,不需要每个页面都写菜单,增加,修改方便. 缺点:(

前端设置遮罩层刷新后页面变白

热门专题