<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>弹出层</title>
<script language="JavaScript">
<!--
function blockui(setting){
setting=setting||{}
var width = setting.width || 500
var height = setting.height || 300
var massage = setting.massage || "loading"
var newMask = document.createElement("div")
var loading = document.createElement("div")
loading.style.position = 'absolute'
loading.style.zIndex = 10
loading.style.border = "1px #666666 solid"
loading.style.background = '#fff'
loading.style.width = width + "px"
loading.style.height = height + "px"
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
var _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
var _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.4";
newMask.style.cursor='wait'
for(i in setting.css){
loading.style[i]=setting.css[i]
if(i==='opacity'){
loading.style.filter="alpha(opacity="+setting.css[i]*100+")"
}
}
loading.className=setting.cssclass;
for(i in setting.overlayCSS){
newMask.style[i]=setting.overlayCSS[i]
if(i==='opacity'){
newMask.style.filter="alpha(opacity="+setting.overlayCSS[i]*100+")"
}
}
newMask.className=setting.overlayCssClass;
if(setting.contentHanler){
setting.contentHanler(loading)
}
if(setting.overlayHanler){
setting.overlayHanler(newMask)
}
document.body.appendChild(newMask);
document.body.appendChild(loading)
var interval;
loading.innerHTML = "";
loading.style.top = (document.documentElement.clientHeight - height - 10) / 2 + "px";
loading.style.left = (document.documentElement.clientWidth - width - 10) / 2 + "px";
if (typeof(massage) === 'string') {
loading.innerHTML = massage;
}
else {
loading.appendChild(massage)
}
setInterval(function(){
var top_ = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop
loading.style.top = (document.documentElement.clientHeight - height) / 2 + top_ + "px"
}, 20)
return function(){
document.body.removeChild(loading)
document.body.removeChild(newMask)
clearInterval(interval)
}
}
window.onload = function(){
var c= blockui({
css: {
background: '#ccc',
opacity:0.8
},
overlayCSS:{
opacity:0.1
},
contentHanler: function(o){
o.onclick = function(){
c()
}
},
overlayHanler:function(o){
o.onclick=function(){
alert('hello')
}
}
})
}
//-->
</script>
</head>
<body>
</body>
</html>
</html>