`

自己写的一个弹出层插件

IE 
阅读更多
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里面的方法即可

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics