运用aop思想来写前端加载提示信息

//<!--蒙板-->
var showLoad = '<div id="bigloadGifShow" style="filter: Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3;position: absolute; left: 0; top: 0; display: back; overflow: hidden;background-color: #000;"></div>';
//<!--弹出层---->
showLoad+='<div id="loadGifShow" style="text-align:center;display:back;position: absolute; left: 46%; top: 46%;"><img src="img/load.gif"/></div>';
//ajax请求开始
$(document).ajaxStart(function (){

$("body").append(showLoad);
showMask("bigloadGifShow");
});
//ajax请求结束
$(document).ajaxStop(function (){

$("#bigloadGifShow").remove();
$("#loadGifShow").remove();
});
//提交form表单
$(function(){

$("form").submit(function (){
$("body").append(showLoad);
showMask("bigloadGifShow");
});
});

//屏蔽输入,显示蒙板
function showMask(id) {
    var obj = document.getElementById(id);
    obj.style.width = document.body.clientWidth;
    obj.style.height = document.body.clientHeight;
    obj.style.display = "block";
}

这里将css样式都写在了style中,而没有单独提出,是因为可以使需要使用的页面少引入一个css文件。

猜你喜欢

转载自1064319393.iteye.com/blog/2264934