纯JS实现可复用弹出层-优快云博客

本文链接：https://blog.youkuaiyun.com/wcf2010/article/details/23824885

网上有很多jquery的弹出层的效果，就是那种点击导航，然后慢慢往下滑动的层。不过那个上面一般都有很多限制，同时使用多个弹出层，该效果就不能够用了，还老报错，并且在ie里面支持得不好。

这里写了一个纯 js的，支持同一个页面上重复使用。不过没有滑动效果。贴上js代码：

var dropdown={} ;
var dropdown_dlg_div = null ;
var dropdown_overlay_div = null;
var dropdown_head_div = null;

var agent = navigator.userAgent || ''
var dropdown_ie = agent.indexOf('MSIE')>=0 ;


dropdown.open = function(ele_id,options)
{
	var ele = document.getElementById(ele_id);
	if(dropdown_dlg_div==null)
	{
		dropdown_dlg_div = document.createElement('div') ;
		dropdown_dlg_div.style.position='absolute';
		//dropdown_dlg_div.style.background = "#FFFFFF";//"#F0FFFF";
		dropdown_dlg_div.style.opacity = 1;
		var w = 200;
		var h = 200 ;
		if(options.width)
			w = options.width ;
		if(options.height)
			h = options.height; 
		dropdown_dlg_div.style.width = 1 ;
		dropdown_dlg_div.style.height =1 ;
		dropdown_dlg_div.style.clear = 'both';
		//alert(xy);
		dropdown_dlg_div.innerHTML=
			"<div class="+options.container_class+" style=\'width:"+w+";height:"+h+"\'><div><table border=0 width=100% height=100% cellspan=0 cellspace=0><tr height=20  valign=top><td align=center class="+options.header_class+">"+options.title+"</td><td align=right><a href=\"javascript:dropdown.close()\"><img src='/img/div_close.jpg' border=0/></a></td></tr><tr><td colspan=2>"+
//这里需要注意，关闭按钮的图片，你自己找一个
			options.getDropDownHtml()+"</td></tr></table></div></div>";
		dropdown_dlg_div.zIndex=65530;
		//alert(ele_id+" "+ele+" "+dropdown_dlg_div);
		
		var xy = getEleXY(ele);
		
		dropdown_dlg_div.style.top=xy[1];
		dropdown_dlg_div.style.left=xy[0] ;
		if(options.position)
		{
			if(options.position.indexOf('right')>=0)
				dropdown_dlg_div.style.left=xy[0]-w;
			if(options.position.indexOf('bottom')>=0)
				dropdown_dlg_div.style.top=xy[1]-h;
		}
		document.body.appendChild(dropdown_dlg_div);//ie
		
	}

	//ele.style.display='';
	dropdown_dlg_div.style.display='' ;
}

function getEleXY(ele)
{
	var x = ele.offsetLeft;
	var y = ele.offsetTop;
	var curele = ele.offsetParent;

	while (curele != null)
	{
		x += curele.offsetLeft;
		y += curele.offsetTop ;
		curele = curele.offsetParent;
	}
	
	//if(dropdown_ie)
	//	return [x*2,y*2];
	//else
	return [x,y];
}

dropdown.close=function()
{
	if(dropdown_dlg_div)
	{
		dropdown_dlg_div.style.display='none' ;
		dropdown_dlg_div.innerHTML ='';
		dropdown_dlg_div.parentNode.removeChild(dropdown_dlg_div);
		dropdown_dlg_div = null;
	}

}

上面的js中，有一个关闭图片，需要你自己放一下，

div_close.jpg

文件命名为dropdown.js，你可以在你的界面里直接引用就行了

<html>
<head>
<title>测试</title>
<script type="text/javascript" src="/system/ui/dropdown.js"></script>
</head>
<body>
这里我就只放三个层，表示我的这个东西一个界面可以支持多个。
<label οnclick="select_xl(1)">第一个</label>
<div id="menu_xl_p_1"></div>
<label οnclick="select_xl(2)">第二个</label>
<div id="menu_xl_p_2"></div>
<label οnclick="select_xl(3)">第三个</label>
<div id="menu_xl_p_3"></div>
</body>
<script>
/*******这个是那三个下拉图层
position: 'right' 位置，right,left
title:'' 标题:可以为空
header_class:'cs9_1' 头部的css:可以为空
container_class:'content_6' 主体内容部分的css样式:可以为空
**********/
function select_xl(id)
{
	
	var mn_id = 'menu_xl_p_' + id;
		dropdown.open(mn_id,{width:400,height:450,
		position: 'right',
		title:'',
		header_class:'cs9_1',
		container_class:'content_6',
		getDropDownHtml:function()
		{
			if(id==1)
			{
	    		return "<iframe src=\"你的界面1.jsp?is_flow=true\" 

style=\"width:100%;height:100%;border:0;\" frameborder=\"0\" scrolling=\"auto\" 

allowTransparency=\"true\" ></iframe>";
	    	}
	    	else if(id==2)
	    	{
	    		return "<iframe src=\"你的界面2.jsp?t=inbox\" 

style=\"width:100%;height:100%;border:0;\" frameborder=\"0\" scrolling=\"auto\" 

allowTransparency=\"true\" ></iframe>";
	    	}
	    	else if(id==3)
	    	{
	    		return "<iframe src=\"你的界面3.jsp?is_flow=false\" 

style=\"width:100%;height:100%;border:0;\" frameborder=\"0\" scrolling=\"auto\" 

allowTransparency=\"true\" ></iframe>";
	    	}
	    	
	    }
	 });
}

</script>
</html>

js弹出层