javascript跨Iframe遮罩层.(IE6 IE7 IE8 FF测试通过)

近日,被遮罩层折腾得快要吐血了.而且最近用jquery也发现了诸多问题.所以就自己用javascript写了一个遮罩层.与大家分享一下,小弟初学,不足之处望请各位高手勿拍,多多指教,

由于时间有限,所以没有许多功能,比如拖动,或者类似于jqeury的动画效果,这些我会在以后的制作中慢慢加入进去.还有代码没有进行很好的优化,以后这些我也会注意.

<script type= "text/javascript" language= "javascript">
function CreatNode(w,h,s)
{

//参数w为弹出页面的宽度,参数h为弹出页面的高度,参数s为弹出页面的路径
var NewMask=window.parent.document.createElement( "div");
NewMask.id= "Mask";
NewMask.style.position= "absolute";
NewMask.style.top= "0";
NewMask.style.left= "0";
NewMask.style.zIndex= "9";
NewMask.style.backgroundColor= "#000";
NewMask.style.filter= "alpha(opacity=70)";
NewMask.style.opacity= "0.7";
NewMask.style.width= "100%";
NewMask.style.height=(window.parent.document.body.scrollHeight+50)+ "px";
var NewDiv=window.parent.document.createElement( "div");
NewDiv.id= "newdiv";
NewDiv.style.width=w;
NewDiv.style.height=h;
NewDiv.style.position= "absolute";
NewDiv.style.top=(window.screen.height-450)/4+ "px"
NewDiv.style.left=(window.screen.width-910)/2+ "px";
NewDiv.style.zIndex= "99";;
var NewFrame=window.parent.document.createElement( "iframe");
NewFrame.id= "frame"
         NewFrame.setAttribute( "frameBorder", "0");
NewFrame.setAttribute( "scrolling", "no");
NewFrame.setAttribute( "allowTransparency", "true");
NewFrame.setAttribute( "width",w);
NewFrame.setAttribute( "height",h);
NewFrame.setAttribute( "src",s);
var NewImg=window.parent.document.createElement( "img");
NewImg.id= "newimg"
NewImg.style.cursor= "pointer";
NewImg.style.position= "relative";
NewImg.style.top= "-479px";
NewImg.style.left= "880px";
NewImg.onclick= function(){
     Cancel();
     }
NewImg.setAttribute( "src", "fancy_closebox.png")
NewImg.setAttribute( "title", "点击关闭")
$( "body",window.parent.document).append(NewMask); //这里用了jquery的添加节点方式,如果没有jquery文件可改成window.parent.document.body.appendChild(NewMask);
$( "body",window.parent.document).append(NewDiv);
$( "#newdiv",window.parent.document).append(NewFrame);
$( "#newdiv",window.parent.document).append(NewImg);
}

//移除添加的节点
function Cancel()
{
window.parent.document.body.removeChild(window.parent.document.getElementById( "Mask"));
window. parent.document.body.removeChild(window.parent.document.getElementById( "newdiv"));
}
</script>

以上代码是用来跨Iframe弹出遮罩层的.如果想用在本页面,把window.parent去掉即可.

调用方法:

既然是跨iframe首先就要准备两个页面.

页面1用来承载页面2基本上就写个iframe标签就可以了.

在页面2中加入上面的js代码,加入后调用方法如下

onclick="CreatNode('902px','469px','http://www.g.cn');"

关闭遮罩层的方法,已经写进CreatNode函数里,不用调用.

关闭所用的图片在NewImg.setAttribute("src","fancy_closebox.png")后面的图片路径就可以了.

希望对大家能有所帮助,纯属个人自娱自乐,请勿拍砖!