首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

自各儿写的一个弹出层插件

2012-11-20 
自己写的一个弹出层插件1.插件jsvar itemIdvar showDivId//控制层居中显示function center(id){va

自己写的一个弹出层插件
1.插件js
   var itemId="";
  var showDivId="";
  //控制层居中显示
  function center(id){
var o = document.getElementById(id);
o.style.display = 'block';
var s = {
position:'absolute',
top:'50%',
left:'50%',
margin:o.offsetHeight/-2+(document.body.scrollTop||document.documentElement.scrollTop)+'px '
+(o.offsetWidth/-2+(document.body.scrollLeft||document.documentElement.scrollLeft))+'px'
}
for(var p in s){
o.style[p] =s[p]
}

}

//显示层
var iframe = document.createElement('iframe');
iframe.style.cssText = 'position:absolute;display:none;z-index:99;';
    iframe.frameBorder = 0;
document.body.appendChild(iframe);

  function showDIV(id){
    center(id);
    var o = document.getElementById(id);
    iframe.width = o.offsetWidth;
    iframe.height = o.offsetHeight;
o.style.visibility = 'visible';
    o.style.zIndex = 100;
    iframe.style.top = o.offsetTop+'px';
    iframe.style.left = o.offsetLeft + 'px';
    iframe.style.display = 'block'
    showDivId=id;
    var laydiv = document.getElementById('laydiv');
    with(laydiv.style){
    width = document.documentElement.scrollWidth + 'px';
    height = document.documentElement.scrollHeight+'px';
    display = 'block';
    }
   }
  
//隐藏层
  function hiddenDIV(id,pageId){
     var o = document.getElementById(id);
     iframe.style.display = 'none'
o?o.style.visibility = 'hidden':'';
document.getElementById('laydiv').style.display = 'none';
document.getElementById(pageId).value="";
document.getElementById(pageId).innerHTML="";
  }
2.在页面上设置一个<div>
3.页面上加一个样式
  <div id="laydiv" style="position:absolute;display:none;filter:alpha(opacity=50);opacity:0.5;background:#999;top:0;left:0;">
<!--[if IE 6]> <iframe frameBorder = 0 width=100% height=100% style="filter:alpha(opacity=0);opacity:0"></iframe><![endif]-->
</div>
4.调用js里面的方法即可

热点排行