目的:使用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>