html+js/jquery实现弹出层效果

在作网页的时候，弹出层是个很好用的东西，它既能够显示出咱们想要的内容，又无需从新加载，并且弹出层的样式还能够按咱们想要的效果改动，今天就来讲一说怎么作一个弹出层。

首先说一个js的方法。这个方法是之前看到的。

既然是作弹出层，那么固然得先作几个div出来，如图

首先是底层的一个div，而后是弹出的div，在底层和弹出之间还有个div，这个div是用来挡住底层div的，防止在窗口弹出后还能点击底层的元素。而后是两个a标签，用来控制层窗口的打开与关闭。下面上代码：

<a href = "JavaScript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击打开</a>
 <div id="light">这是一个层窗口示例程序. 
      <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点击关闭</a>
</div> 
<div id="fade"></div>

关于层窗口的样式部分，我就不贴出来了，能够看出代码其实很简单，只需给a标签添加一个onclick点击事件就能够了，用display来控制层窗口的显示与隐藏，light便是咱们想要的层窗口，fade则为阻挡层。

可是呢，他又没有彻底达到咱们想要的效果，当点击打开的时候，它就直接弹了出来，给人的感受很突兀，若是能有个过渡效果那看起来就很好了。这时jquery就能很好地发挥做用了。
fadein、fadeout实现淡入淡出，这里放一个演示连接fade,而hide和show实现显示和隐藏，还有slide控制滑动。
咱们这里使用fade和slide，代码以下：
html部分：

<a href="#" id="showWin">显示</a>
<div id="light">这是一个层窗口示例程序. 
     <a href="#" id="hideWin">隐藏</a>
</div> 
<div id="fade"></div>

jquery部分：

$(document).ready(function () {
    		$("#showWin").click(function(){
				$("#light").slideDown();
				$("#fade").fadeIn();
    		});
    		
    		$("#hideWin").click(function(){
    			$("#light").slideUp();
    			$("#fade").fadeOut();
    		})
    	});

这样就给层窗口添加了一个动画效果，在点击时层窗口会在一秒钟的时间内滑下来，给人的感受友好不少。

其实若是对css中的transition熟悉的话，彻底能够用css作出这样的效果来，甚至作出更多的动画效果，有兴趣的能够先试试，下次将为你们带来css实现的层窗口效果。