随便写了一个弹层，功能很简单
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 = {
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;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;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%;*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;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;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-68px;min-52px\9;*min-auto;height:24px;padding:0 5px 1px;*padding:0 10px 1px;}
.box iframe.box-iframe, .box-loading{position:relative;height:100%;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{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; 100%; height: 100%; background-position: initial initial; background-repeat: initial initial; filter: alpha(opacity:20);}
#js_box_container { 500px; position: absolute; left: 701px; top: 191.5px;z-index: 9999; display: none;}