弹层

随便写了一个弹层，功能很简单

var box = (function(){
	var box_html = '<div><div class="box show"><!--显示/隐藏：show/hide--><div class="opacity-bg"><!--半透明背景--></div><a class="btn-close show js-btn-close" href="#">关闭</a><!--显示/隐藏：show/hide,小版按钮:btn-close,大版按钮:btn-close-b--><!--普通弹出层[[--><div class="box-title show"><h2>温馨提示</h2></div><div class="box-main"><!--操作提示(默认)[[--><div class="tips"><span class="tips-ico"><span class="ico-info"><!--图标--></span></span><div class="tips-content"><div id="js_tips_title" class="tips-title"> </div><div id="js_tips_line" class="tips-line"></div></div></div><!--操作提示(默认)]]--><div class="box-buttons"><button type="button" class="js-btn-close">关闭</button></div></div><!--普通弹出层]]--></div></div>';
	var js_mask_layer = null,
		js_box_container = null;
	var _hide = function(){
		js_mask_layer && (js_mask_layer.style.display = 'none');
		js_box_container && (js_box_container.style.display = 'none');
	};
	var _config = {
		width: 500
	};
	var bind = function(){
		if(arguments.callee.isInited){
			return;
		}
		js_box_container.onclick = function(e){
			e = e || window.event;
			var target = e.target || e.srcElement;
			if(target.className.indexOf('js-btn-close') > -1){
				_hide();
			};
		};
		arguments.callee.isInited = true;
	};
	var getRegion = function(){
		var docElement = document.compatMode == 'CSS1Compat' ? document.documentElement : document.body,
			_clientWidth = docElement.clientWidth,
			_clientHeight = docElement.clientHeight,
			_scrollLeft = window.pageXOffset ? window.pageXOffset : docElement.scrollLeft,
			_scrollTop = window.pageYOffset ? window.pageYOffset : docElement.scrollTop,
			_scrollWidth = docElement.scrollWidth,
			_scrollHeight = docElement.scrollHeight;
		return {
			clientWidth: _clientWidth,  //浏览器可视宽度
			clientHeight: _clientHeight,
			scrollWidth: _scrollWidth,  //当前网页实际宽度（包括未显示部分）
			scrollHeight: _scrollHeight,
			scrollLeft: _scrollLeft,  //浏览器滚动距离
			scrollTop: _scrollTop,
			left: _clientWidth/2 + _scrollLeft,
			top: _clientHeight/2 + _scrollTop
		};
	};
	var _show = function(title, content, config){
		if(typeof config == 'object'){
			for(var name in _config){
				if(typeof config[name] != 'undefined'){
					_config[name] = config[name];
				}
			}
		}
		js_box_container = js_box_container || document.getElementById('js_box_container');
		if(!js_box_container){
			js_box_container = document.createElement('div');
			js_box_container.id = 'js_box_container';
			js_box_container.innerHTML = box_html;
			document.body.appendChild(js_box_container);
		}
		js_mask_layer = js_mask_layer || document.getElementById('js_mask_layer');
		if(!js_mask_layer){
			js_mask_layer = document.createElement('div');
			js_mask_layer.id = 'js_mask_layer';
			document.body.appendChild(js_mask_layer);
		}
		if(!title){
			title = '';
		}
		if(!content){
			content = '';
		}
		bind();
		document.getElementById('js_tips_title').innerHTML = title;
		document.getElementById('js_tips_line').innerHTML = content;
		js_box_container.style.display = 'block';
		js_mask_layer.style.display = 'block';
		js_box_container.style.width = _config.width + 'px';
		var region = getRegion();
		console.log(region);
		js_mask_layer.style.width = region.scrollWidth + 'px';
		js_mask_layer.style.height = region.scrollHeight + 'px';
		var boxWidth = js_box_container.offsetWidth,  //box元素宽度
			boxHeight = js_box_container.offsetHeight;  //box元素高度
		console.log(boxWidth + ' : ' + boxHeight);
		js_box_container.style.position = 'absolute';
		js_box_container.style.left = (region.left - boxWidth/2) + 'px';
		js_box_container.style.top = (region.top - boxHeight/2) + 'px';
		
	};
	
	return {
		'show': _show,
		'hide': _hide
	};
})();
setInterval(function(){
	box.show('当前浏览器不支持复制功能a。', '这里是interval里面了<a href="http://www.google.com" target="_blank">google</a>');
}, 10000);
box.show('当前浏览器不支持复制功能a。<a href="http://www.google.com" target="_blank">google</a>', 'adfasdfa');

样式是从tenpay.com拷贝过来的，我只是稍作修改

@CHARSET "UTF-8";
/**
  * @name      : tips
  * @explain   : 操作提示
  * @type      : 基类
  * @dependent : 无
  * @author    : joinli
  * @version   : 1.0
  * @html      :

    <div class="tips">
      <span class="tips-ico"><span class="ico-ok"><!-- 图标 --></span></span>
      <div class="tips-content">
        <div class="tips-title">提示标题</div>
        <div class="tips-line">提示描述</div>

        <div class="tips-buttons">
          <a class="btn-white" href="#"><span>按钮</span></a>
          <a href="#">链接</a>
        </div>
      </div>
    </div>
  */
.box .ico-ok, .box .ico-error, .box .ico-info, .box .ico-question, .box .ico-question-s, .box .ico-warn, .box .ico-wait{background:url(https://img.tenpay.com/v2/res/component/box/box.png?v=20110427.png) no-repeat;display:inline-block;width:32px;height:32px;}
.box .ico-ok{background-position:-66px 0;}
.box .ico-error{background-position:0 0;}
.box .ico-info{background-position:-33px 0;}
.box .ico-question{background-position:-99px 0;}
.box .ico-warn{background-position:-165px 0;}
.box .ico-wait{background-position:-132px 0;}

.box .tips{padding:34px 0 0;}
.box .tips-ico{float:left;position:relative;top:-9px;width:auto;padding-left:5%;margin-right:16px;_margin-right:13px;text-align:right;}
.box .tips-content{overflow:hidden;height:1%;padding-right:5%;}
.box .tips-title, .box .tips-line{padding:0 0 8px;}
.box .tips-title{font-weight:700;font-size:14px;}
.box .tips-line{line-height:20px;}
.box .tips-line .error-code{position:relative;display:inline-block;vertical-align:top;padding-right:26px;color:#999999;}
.box .tips-line .error-code .ico-question-s{position:absolute;right:0;top:2px;_top:3px;cursor:help;}
.box .font-red{color:#c00;}
.box .tips-buttons{margin-top:20px;}
.box .tips-buttons .btn-blue, .box .tips-buttons .btn-blue-s, .box .tips-buttons .btn-white, .box .tips-buttons .btn-white-s{margin-right:16px;}

/**
  * @name      : box
  * @explain   : 弹出层
  * @type      : 基类
  * @dependent : 无
  * @author    : joinli
  * @version   : 1.0
  * @html      :
  */
p,h2{margin:0;padding:0;}
.box .btn-close, .box .btn-close-b{background:url(https://img.tenpay.com/v2/res/component/box/box.png?v=20110427.png) no-repeat;}
.box{position:relative;height:100%;*width:100%;margin:-9px;padding:9px;font-size:12px;line-height:1.5;background-color:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);}
.box .btn-close{background-position:-286px 0;position:absolute;z-index:1;right:13px;top:13px;width:16px;height:16px;overflow:hidden;text-indent:-99em;text-decoration:none;}
.box .btn-close:hover{background-position:-302px 0;}
.box .btn-close-b{background-position:-249px 0;position:absolute;z-index:1;right:17px;_right:19px;top:19px;width:18px;height:18px;overflow:hidden;text-indent:-99em;text-decoration:none;}
.box .btn-close-b:hover{background-position:-267px 0;}
.box-title{position:relative;border:1px solid #369;border-bottom:none;margin:-1px -1px 0;background-color:#EBF2FA;padding:1px 0;}
.box-title h2{height:2em;line-height:2em;color:#666;font-size:100%;text-indent:12px;}
.box-main{position:relative;background-color:#fff;border:1px solid #369;margin:0 -1px -1px;border-top:none;zoom:1;}
.box-buttons{margin-top:23px;padding:0 9px 9px 0;text-align:right;}
.box-buttons button{margin-left:8px;min-width:68px;min-width:52px\9;*min-width:auto;height:24px;padding:0 5px 1px;*padding:0 10px 1px;}
.box iframe.box-iframe, .box-loading{position:relative;height:100%;width:100%;margin:-1px;overflow:hidden;border:1px solid #6685A2;background-color:#FFFFFF;}
.box-loading{display:none;}
.box-loading .ico-loading-16{position:absolute;left:50%;top:50%;margin:-8px 0 0 -60px;}
.show-box-loading .box-loading{display:block;}
.show-box-loading iframe.box-iframe{width:0;height:0;}

#js_mask_layer { display: none; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.2; z-index: 9998; width: 100%; height: 100%; background-position: initial initial; background-repeat: initial initial; filter: alpha(opacity:20);}
#js_box_container {width: 500px; position: absolute; left: 701px; top: 191.5px;z-index: 9999; display: none;}