JavaScript点击按钮弹出层效果
JavaScript点击按钮弹出层效果属于前端实例代码，有关更多实例代码大家可以查看。
强大的效果其实都是由一个个简单的功能组合而成的，下面介绍一下如何实现点击一个按钮弹出一个层的效果。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:160px;
height:100px;
background:#33ccff;
display:none;
position:absolute;
}
div ul{text-align: center;}
div li{list-style-type: none;}
button{
top:300px;
left:400px;
position:absolute;
}
</style>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementsByTagName('button')[0];
var flt=document.getElementsByTagName('div')[0];
btn.onclick=function(ev){
var ev=ev||window.event;
if(ev.cancelBubble){ev.cancelBubble=true;}
else{ev.stopPropagation()} var x=btn.offsetLeft-15+'px';
var y=btn.offsetTop-100+'px';
flt.style.top=y;
flt.style.left=x;
flt.style.display='block';
}
document.onclick = function(){
flt.style.display='none';
}
}
</script>
</head>
<body>
<button id="btn">点击弹出层</button>
<div>
<ul id="nav">
<li class="item1"><a href="">前端教程网一</a></li>
<li class="item2"><a href="">前端教程网二</a></li>
<li class="item3"><a href="">前端教程网三</a></li>
<li class="item4"><a href="">前端教程网四</a></li>
<li class="item5"><a href="">前端教程网五</a></li>
</ul>
</div>
</body>
</html>
以上代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释：
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var btn=document.getElementsByTagName('button')[0]，获取按钮对象，getElementsByTagName()函数获取的是一个对象集合，所以要想获取某一个对象，则需要使用索引值访问集合中的元素。
（3）.var flt=document.getElementsByTagName('div')[0]，和上面一样的道理，这里不多介绍了。
（4）.btn.onclick=function(){}，为按钮注册onclick事件处理函数。
（5）.var ev=ev||window.event，事件对象的兼容性处理。
（6）.if(ev.cancelBubble){ev.cancelBubble=true;}，阻止事件冒泡，IE8和IE8以下浏览器支持，之所以要阻止事件冒泡，是防止点击按钮之后，会弹出窗口，但是事件会冒泡的document，瞬间又将窗口隐藏，于是点击按钮也就无法弹出窗口了。
（7）.else{ev.stopPropagation()}，标准浏览器弹出窗口效果。
（8）.var x=btn.offsetLeft-15+'px'，设置弹出窗口距离body左侧的尺寸。
（9）.var y=btn.offsetTop-100+'px'，设置弹出窗口距离body上测的尺寸。
（10）.flt.style.top=y，flt.style.left=x，设置它们的样式。
（11）.flt.style.display='block'，将弹出层显示。
（12）.document.onclick=function(){}，在document上注册onclick事件处理函数。
（13）.flt.style.display='none'，将弹出窗口隐藏。
二.相关阅读：
（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.var ev=ev||window.event参阅var ev=window.event||ev 作用一章节。
（3）.stopPropagation()参阅JavaScript stopPropagation()一章节。
（4）.offsetLeft属性参阅JavaScript offsetLeft一章节。
（5）.事件冒泡参阅JavaScript 事件冒泡一章节。
JavaScript点击按钮弹出层效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript点击按钮弹出层效果就介绍到这了。