8.7w+
社区成员
<!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=gb2312" />
<title></title>
<script type="text/javascript">
/******************************
*功能:提供js遮罩功能
*开发:walkingp
*主页:http://www.51obj.cn/
*E-mail:walkingp@126.com
*******************************/
(function(){
var $=document.getElementById;
var id='lightBox';
var cuteDialog={
/*遮罩样式*/
shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
/*对话框样式*/
dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666;',
/*p层新式*/
pCssText:'text-align:right;',
showDialog:function(){
var oDiv=$(arguments[0]);
/*遮罩层*/
var shadow=document.createElement('div');
shadow.setAttribute('id','shadow');
shadow.setAttribute('style',this.shadowCssText);
/*对话框*/
var dialog=document.createElement('div');
dialog.setAttribute('id','dialog');
dialog.setAttribute('style',this.dialogCssText);
dialog.appendChild(oDiv);
/*p层:存放操作按钮*/
var p=document.createElement('p');
p.setAttribute('style',this.pCssText);
var btnClose=document.createElement('button');
btnClose.innerHTML='关闭';
btnClose.onclick=function(){
var oShadow=$('shadow'),oDialog=$('dialog');
document.documentElement.removeChild(oShadow);
document.documentElement.removeChild(oDialog);
}
p.appendChild(btnClose);
dialog.appendChild(p);
document.documentElement.appendChild(shadow);
document.documentElement.appendChild(dialog);
//遮罩层100%高度
var h=document.documentElement.clientHeight + 'px';
$('shadow').style.height=h;
},
hideDialog:function(){
}
}
function InitFunc(){
$('openDlg').onclick=function(){
cuteDialog.showDialog('lightBox');//初始化遮罩
}
}
/*初始化*/
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent('onload' ,func);
}else if(window.addEventListener){
window.addEventListener('load',func,false);
}else{
window.onload=func;
}
})(InitFunc);
})();
</script>
</head>
<body>
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
</body>
</html>
<!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=gb2312" />
<title></title>
<script type="text/javascript">
/******************************
*功能:提供js遮罩功能
*开发:walkingp
*主页:http://www.51obj.cn/
*E-mail:walkingp@126.com
*******************************/
(function(){
var $=document.getElementById;
var id='lightBox';
var cuteDialog={
/*遮罩样式*/
shadowCssText:'filter:alpha(opacity=80);opacity:0.8;background:#000;width:100%;position:absolute;left:0;top:0;z-index:99998;',
/*对话框样式*/
dialogCssText:'position:absolute;height:50;margin-left:-300px;left:50%;font-size:12px;padding:10px;width:600px;z-index:99999;background:#fff;border:solid 10px #666; top:100px',
/*p层新式*/
pCssText:'text-align:right;',
showDialog:function(){
var oDiv=$(arguments[0]);
/*遮罩层*/
if($('shadow')==null)
{
var shadow=document.createElement('div');
shadow.setAttribute('id','shadow');
shadow.setAttribute('style',this.shadowCssText);
/*对话框*/
var dialog=document.createElement('div');
dialog.setAttribute('id','dialog');
dialog.setAttribute('style',this.dialogCssText);
dialog.appendChild(oDiv);
/*p层:存放操作按钮*/
var p=document.createElement('p');
p.setAttribute('style',this.pCssText);
var btnClose=document.createElement('button');
btnClose.innerHTML='关闭';
btnClose.onclick=function(){
var oShadow=$('shadow'),oDialog=$('dialog');
//document.documentElement.removeChild(oShadow);
//document.documentElement.removeChild(oDialog);
shadow.style.display = "none";
oDialog.style.display = "none";
}
p.appendChild(btnClose);
dialog.appendChild(p);
document.documentElement.appendChild(shadow);
document.documentElement.appendChild(dialog);
}
else
{
$('shadow').style.display = "block";
$('dialog').style.display = "block";
}
//遮罩层100%高度
// var h=document.documentElement.clientHeight + 'px';
//$('shadow').style.height=h;
$('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
$('shadow').style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"
},
hideDialog:function(){
}
}
function InitFunc(){
$('openDlg').onclick=function(){
cuteDialog.showDialog('lightBox');//初始化遮罩
}
}
/*初始化*/
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent('onload' ,func);
}else if(window.addEventListener){
window.addEventListener('load',func,false);
}else{
window.onload=func;
}
})(InitFunc);
})();
</script>
</head>
<body>
<button id="openDlg">打开</button>
<div id="lightBox">这是其中的内容</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</body>
</html>