欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!
您现在的位置:web记录 > 前端开发 > JavaScript >

点击一个链接后弹出层

更新时间:2013-05-07 浏览次数:
点击一个图片或文字激发一个事件,即弹出层。此脚本的效果是弹出一个居中的层,层外部样式可以根据css样式自己调整。以下是代码,可以直接引用

<style> 
  .black_overlay{  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  }  .white_content {  display: none;  position: absolute;  top: 25%;  left: 25%;  width: 50%;  height: 50%;  padding: 16px;  border: 16px solid orange;  background-color: white;  z-index:1002;  overflow: auto;  }  </style> 

<body>
可以根据自己要求修改css样式<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a> 
<div id="light" class="white_content"> 
  不必把太多人,请进生命里。若他们走进不了你内心,就只会把你生命搅扰得拥挤不堪。孤单,并非身边没有朋友,只是心里无人做伴。都市里遍地是热闹而孤寂的灵魂,来来往往的行人,不过是命中的游客,越热闹越冷清。生命无需过多陪衬,需要的仅是一种陪伴。
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
    Close</a></div> 
<div id="fade" class="black_overlay"> 
</div> 
</body>
关键词:

    + 相关信息

    前端案例

    返回顶部 欢迎访问web记录!每一步的成长都是一种幸福,聪明的女孩擅长记录幸福!