模拟一个弹窗口
html
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>浮动窗口</title> 6 <script type="text/javascript" src="../jslib/jquery-2.1.4.min.js"></script> 7 <script type="text/javascript" src="../jslib/jQueryWin.js"></script> 8 <link type="text/css" rel="stylesheet" href="../css/win.css" /> 9 </head> 10 <body> 11 <a onclick="showWin()" href="#">显示浮动窗口</a> 12 <div id="win"> 13 <div id="title">我是标题栏啊！！<span id="close" onclick="hide()">X</span></div> 14 <div id="content">我是一个窗口哦！！</div> 15 </div> 16 </body> 17 </html>
js
//显示浮动窗口的方法 function showWin() { //lert("准备显示弹出窗口啦！！！"); //1.找到窗口对应的div节点 var winNode = $("#win"); //2.让div对应的窗口显示出来 //方法1,修改节点的css值，让窗口显示出来 //winNode.css("display","block"); //方法2，利用Jqeury的show方法 //winNode.show("slow"); //方法3，利用JQuery的fadeIn方法 winNode.fadeIn("slow"); } //隐藏窗口的方法 function hide() { //1.找到窗口对应的节点 var winNode = $("#win"); //2.将窗口隐藏起来 //方法1，修改css //winNode.css("display","none"); //方法2，利用hide方法 //winNode.hide("slow"); //方法3，利用fadeOut方法 winNode.fadeOut("slow"); }
css
1 /*id选择器*/ 2 #win { 3 /*希望窗口有边框*/ 4 border: 1px red solid; 5 /*希望窗口宽度和高度固定，不要太大*/ 6 width: 300px; 7 height: 200px; 8 /*希望控制窗口的位置*/ 9 position: absolute; /*绝对定位*/ 10 top: 100px; 11 left: 350px; 12 /*希望窗口开始时不可见*/ 13 display: none; 14 } 15 16 /*控制标题栏的样式*/ 17 #title { 18 /*控制标题栏的背景色*/ 19 background-color: blue; 20 /*控制标题栏中文字的颜色*/ 21 color: yellow; 22 /*控制标题栏的左内边距*/ 23 padding-left:3px; 24 } 25 26 /*控制内容区域的样式*/ 27 #content { 28 padding-left: 3px; 29 padding-top: 5px 30 } 31 /*控制关闭按钮的位置*/ 32 #close { 33 /*使关闭按钮向右侧移动*/ 34 margin-left: 158px; 35 /*让鼠标进入时可以显示小手，告知用户可以点击操作*/ 36 cursor: pointer; 37 }