我刚写了一个用于实现遮罩功能的库,但存在两个问题:
1、库中并没有使用removeChild,但div第二次遮罩就消息了;
2、当页面高度过大,出现滚动条时,遮罩位置显示不正确。请高手指点。
<!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:[email protected]
*******************************/
(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>
1、库中并没有使用removeChild,但div第二次遮罩就消息了;
2、当页面高度过大,出现滚动条时,遮罩位置显示不正确。请高手指点。
<!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:[email protected]
*******************************/
(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>
解决方案 »
- JS 问题
- 关于submit执行前的一些操作该怎么做呢?
- 级联下拉菜单出现问题,提示网页上有错!
- 求助:W3C标准 导致俺JS代码失效
- 大家帮偶优化一下,最好能在3秒内显示出来,谢谢!
- 为什么在保存网页的时候会出现“无法在指定位置保存网页。”的提示
- 主页中选中下拉框中"other"值时就弹出一页面,输入值后按submit传回该值(到主页面),加在下拉框的菜单中,用javascript怎么做?
- 难道我发现了微软的一个bug??
- 请教一个关于表单检测的问题?
- js下拉菜单 点击一下全部被拉出来了 求大神指教
- ListBox 用脚本怎么清空,赋值
- JS onclick 单击子对象 父对象也会相应onclick 函数 如何?
效果考虑不周全 没有考虑浏览器缩放的问题<!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:[email protected]
*******************************/
(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>
var oDiv1=$(arguments[0]);
var oDiv=oDiv1.cloneNode(true);
当你removeChild(dialog)时因为这时你把oDiv放到dialog里面了,所以再一次获得oDiv时,页面上已经没有这东西了.用上面的,复制一个节点,把它放到dialog里面就可以解决了.
关于遮住的高度.LS已经说了
不过ie6不支持
最近状态不佳啊。
……
document.documentElement.removeChild(oShadow);
document.documentElement.removeChild(oDialog);
把这个给搞忘了……
$('shadow').style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";Math.max !!!
http://topic.csdn.net/u/20100223/17/edb27cb3-24ff-461d-9cff-eb8b8816b6bf.html?56921
而且还兼容很多浏览器