js 遮罩层 loading 效果

来源：互联网发布：小米note 顶配版我知乎编辑：程序博客网时间：2024/06/01 18:09

js 遮罩层 loading 效果

//调用方法

//关闭事件<button onclick='LayerHide()'>关闭</button>，在loadDiv(text)中，剔除出来

//调用LayerShow(text)，text为参数，可以写入想要写入的提示语

//本方法在调用时会自动生成一个添加到body的div，并且会在调用隐藏遮罩层 LayerHide()时删除div

//将其放在页面的div中加载

//产生遮罩层function loadDiv(text) {     var div = "<div id='_layer_'> <div id='_MaskLayer_' style='filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;" +                 "left: 0; top: 0; overflow: hidden; display: none'></div><div id='_wait_' style='z-index: 1005; position: absolute; width:430px;height:218px; display: none'  ><center><h3>" + "" + text + "<br/><br/><img src='/imart/images/loading.gif'/></h3><button onclick='LayerHide()'>关闭</button></center></div></div>";    return div; }

//封装遮罩层div显示效果

//触发遮罩层function LayerShow(text) {    var addDiv= loadDiv(text);    var element = $(addDiv).appendTo(document.body);       $(window).resize(Position);     var deHeight = $(document).height();     var deWidth = $(document).width();     Position();     $("#_MaskLayer_").show();     $("#_wait_").show(); }  //获取相对位置 function Position() {   $("#_MaskLayer_").width($(document).width());     var deHeight = $(window).height()+300;       var deWidth = $(window).width();       $("#_wait_").css({ left: (deWidth - $("#_wait_").width()) / 2 + "px", top: (deHeight - $("#_wait_").height()) / 2 + "px" }); }//隐藏遮罩层 function LayerHide() {     $("#_MaskLayer_").hide();     $("#_wait_").hide();     del(); }//清空div,避免产生重复 function del() {  var delDiv = document.getElementById("_layer_");  delDiv.parentNode.removeChild(delDiv);  //删除 }

1 0