手写H5/web loading效果和消息提示层

众所周知，在前端开发中，loading效果和消息提示层是经常用到的，当然这里有很多成熟的前端提示层插件，例如：layer

这里我们自己动手写一下，话不多说，上代码：

准备rem.js，用来将rem和px互转，代码如下：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=750){
                docEl.style.fontSize = '100px';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

准备css样式，showMsg.css：

.opacityDiv { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); z-index: 99; }
.popBox { border-radius: 0.1rem; position: fixed; top: 50%; left: 50%; margin-left: -2.5rem; z-index: 101; transform: translateY(-50%); -webkit-transform: translateY(-50%); background: #fff; width: 5rem; background: #fff; padding: 0.2rem 0 0 0; }
.pop_title { text-align: center; font-size: 0.24rem; color: #333; }
.popBox_content { padding: 0.2rem; }
.ptPad{
	padding: 0.3rem 0 0.5rem;
}
.btn_common{ background: none; color: #999; font-size: 0.24rem; padding: 0.18rem 0; }
.btn_common { font-size: 0.28rem; color: #fff; text-align: center; display: block; border-radius: 0.1rem; background: #00c622; padding: 0.16rem 0; }
.btn_common { background: none; color: #999; font-size: 0.24rem; padding: 0.18rem 0; }
.noMsg {
    text-align: center;
    font-size: 0.28rem;
    padding: 0.4rem 0;
    color: #666;
}
.app_loading { position: fixed; top: 50%; left: 50%; text-align: center; z-index: 1002; padding-top: 0.16rem; background: rgba(0,0,0,.7); border-radius: 0.1rem; margin-left: -0.8rem; margin-top: -0.8rem; width: 1.6rem; height: 1.6rem; }
.app_loading b { display: block; font-size: 0.18rem; letter-spacing: 0.01rem; font-weight: normal; color: #fff;padding-top:0.04rem; }
.app_loading img { max-width: 100%; }

html内容：

  




		
        
		
		 
		

			
			加载中
		

		
		


		
		

		

		

			

		
		
		

	

当然html代码里面的js方法其实可以提出来放到一个js文件里面去，这里我偷懒了..

看看最后效果吧：

转载于:https://my.oschina.net/u/3696256/blog/3079816