最简单的弹出层效果

只用了几行简单的js代码即可实现，非常容易看懂，稍微加工，就可以做出不同的效果来

查看演示页面 View Demo 查看全部代码 View Code

CSS样式表：

<style>

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;}

#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}

#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

.title{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;height:20px}
.title_left {float:left;}
.title_right {float:right;}
.title_right span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

.content{padding:5px;}

</style>

javascript代码：

<script>

window.onload = function ()

{

	var oWin = document.getElementById("win");

	var oLay = document.getElementById("overlay");	

	var oBtn = document.getElementsByTagName("button")[0];

	var oClose = document.getElementById("close");

	oBtn.onclick = function ()

	{

		oLay.style.display = "block";

		oWin.style.display = "block"	

	};

	oClose.onclick = function ()

	{

		oLay.style.display = "none";

		oWin.style.display = "none"	

	}

};

</script>

HTML代码：

<div id="overlay"></div>

<div id="win">
	<div class="title">
		<div class="title_left">shanrejs.com弹出层效果</div>
		<div class="title_right"><span id="close">×</span></div>
	</div>
	<div class="content"><a href="http://www.sharejs.com">www.sharejs.com</a>欢迎您的到来！</div>
</div>

<center><button>弹出层</button></center>