现在都是用的是人家封装的框架什么的，但是对于底层的了解也是必须的，不然就无法提升，下面分享一个2 years ago 自己封装的一个提示框
样式很简单（适用于任何分辨率）
具体代码如下
/**
* 该js 用于数据加载时给予模态框提示，以增加用户体验
* @since 1.0.1
* @param $ jQuery
* @author dex
* 初创：2017.8.16
* 更改：2017.11.18
* 使用方法：
* $.layer.openMask("正在登陆... ");//显示模态框
* $.layer.setMaskTitle("改变提示语！");//更改提示语
* $.layer.closeMask();//关闭模态框
* $.layer.loading();//打开\关闭加载模态框
*
* $.layer.loading(); // 数据加载框
* $.layer.alert("网络异常！")；// 自动关闭提示框
*
* 注意 【background: 'transparent url(./layer/img/loading.gif) no-repeat',】 这路径需要按自己放置目录更改
*/
(function ($) {
var layer = {
_init:function(message){//初始化layer
var _html ='<div id="dialog_box"></div><div id="load_box"><span id="load_msg">'
+ message + '</span></div>';
//必须先将_html添加到body，再设置Css样式
$("body").append(_html); GenerateCss();
},
_open:function(message){//显示layer
layer._init(message);
},
_change:function(message){//更改layer
$("#load_msg").html(message);
///定时关闭遮罩...
window.setTimeout(function(){
layer._close();
}, 3000);
},
_close:function(){//关闭layer
if($("#dialog_box").length > 0)
$("#dialog_box,#load_box").remove();
},
_action:function(message){//执行动作
//根据页面是否存在dialog_box来决定调用哪一个方法
if($("#dialog_box").length > 0){
layer._change(message);
}else{
layer._open(message);
}
}
};
//生成css
var GenerateCss = function(){
$("#dialog_box").css({ width: 'auto', height: 'auto', zIndex: '99999', position: 'fixed',
filter: 'Alpha(opacity=60)', backgroundColor: 'White', top: '0', left: '0', opacity: '0.4'
});
$("#load_box").css({ zIndex: '999999', position: 'fixed',
backgroundColor: 'black', borderRadius: '8px',textAlign:'center',opacity: '0.6'
});
$("#load_msg").css({ display: 'block', fontSize: '14px', color: 'White',
padding: '10px 15px',
borderRadius: '15px 15px 0 0'
});
var _widht = document.documentElement.clientWidth; //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高
var boxWidth = $("#load_box").width();
var boxHeight = $("#load_box").height();
//让提示框居中
$("#load_box").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
};
var overridMsg = function(message){
message = $.extend({msg:"加载中..."},{msg:message});
layer._action(message.msg);
};
$.extend({
layer: {
setMaskTitle: function (title) {
overridMsg(title);
},
openMask: function (title) {
overridMsg(title);
},
closeMask: function () {
layer._close();
},
loading:function(){
layerLoading._action();
},
alert: function() {// 打开一个默认模态提示框，默认持续 1 秒之后关闭，单位毫秒
var title = arguments[0]?arguments[0]:"";
var timeout = arguments[1]?arguments[1]:1000;
overridMsg(title);
setTimeout(function(){layer._close();}, timeout);
}
}
});
var layerLoading = {
_init:function(){//初始化layer
var _html ='<div id="loading_box"></div><div id="loading_inner"></div>';
//必须先将_html添加到body，再设置Css样式
$("body").append(_html); GenerateCssOfLoading();
},
_open:function(){//显示layer
layerLoading._init();
},
_close:function(){//关闭layer
$("#loading_box,#loading_inner").remove();
},
_action:function(){//执行动作
//根据页面是否存在dialog_box来决定调用哪一个方法
if($("#loading_box").length > 0){
layerLoading._close();
}else{
layerLoading._open();
}
}
};
//生成css
var GenerateCssOfLoading = function(){
$("#loading_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
filter: 'Alpha(opacity=60)', backgroundColor: 'White', top: '0', left: '0', opacity: '0.4'
});
$("#loading_inner").css({ width:32,height:32, zIndex: '999999', position: 'fixed',
background: 'transparent url(./layer/img/loading.gif) no-repeat',
textAlign:'center'
});
var _widht = document.documentElement.clientWidth; //屏幕宽
var _height = document.documentElement.clientHeight; //屏幕高
var boxWidth = $("#loading_inner").width();
var boxHeight = $("#loading_inner").height();
//让提示框居中
$("#loading_inner").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
};
})(window.jQuery);
资源下载 https://download.csdn.net/download/qq_34817440/11599784
