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点击按钮弹出层效果就介绍到这了。

回复

我来回复
  • 暂无回复内容