jQuery 弹出div层

目的:使用jQuery弹出一个div窗口;这种效果经常应用于页面内容的展示,登录效果的实现。其实,实现这种效果有好多种方式;

效果如下:

jQuery 弹出div层

代码如下:

<html>
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>使用jQuery弹出div窗口</title>
	<script type="text/javascript" src="jquery-2.1.1/jquery-2.1.1.js"></script>
	<style>
		#win{
		    border:1px gray solid;
    		/*窗口的高度和宽度*/
    		width : 300px;
    		height: 200px;
    		/*窗口的位置*/
    		position : absolute;
    		top : 100px;
    		left: 450px;
    		/*开始时窗口不可见*/
    		display : none;
		}

		/*控制背景色的样式*/
		#title{
    		background-color:#CCCCCC;
    		color:#0000FF;
    		padding-left:3px;
		}

		/*控制关闭按钮的位置*/
		#close{
    		margin-left: 188px;
    		/*当鼠标移动到关闭按钮上时,出现小手的效果*/
    		cursor: pointer;
		}
	</style>
	<script>
		function showWin(){
			var winNode = $("#win");
   			//方法1:利用js修改css的值,实现显示效果
  		 	// winNode.css("display", "block");
   			//方法2:利用jquery的show方法,实现显示效果
   			// winNode.show("slow");
   			//方法3:利用jquery的fadeIn方法或slideDown方法实现动画效果
   			//winNode.fadeIn(2000);
			winNode.slideDown(2000);
		}
		function closeWin(){
   			var winNode = $("#win");
   			//方法1:修改css的值
  			//winNode.css("display", "none");
			//方法2:jquery的hide方法
  			//winNode.hide("slow");
  			//方法3:使用jQuery的fadeOut或slideUp方法
 			//winNode.fadeOut("slow");
			winNode.slideUp(2000);
		}
	</script>
	</head>
	<body>
		<div style="text-align:center; margin-top:50px"><a onClick="showWin()" href="#">弹出窗口</a>  </div>
        <div id="win">
            <div id="title">标题栏
				<span id="close" onClick="closeWin()">关闭</span>
			</div>
            <div>这是弹出窗口的div内容;</div>
        </div>
	</body>
</html>  
上一篇:Josephus2


下一篇:java web的一些特殊用法(一)