简略的javascript弹出层
日期：2014-05-16 浏览次数：20441 次
简单的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 = document.documentElement.clientHeight+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+")"
}
}
if(setting.cssclass)
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+")"
}
}
if(setting.overlayCssClass)
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)
}
}
测试
<!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>
<style type="text/css">
.test1{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
</style>
<script type="text/javascript" language="JavaScript" src="blockui.js">
</script>
<script language="JavaScript">
<!--
window.onload = fun
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
