模拟一个弹窗口
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 }
时间： 2024-10-03 22:54:44