使用js闭包封装一个原生的模态框

现在都是用的是人家封装的框架什么的，但是对于底层的了解也是必须的，不然就无法提升，下面分享一个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