淡入淡出窗口

模拟一个弹窗口

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 }

 

posted @ 2015-06-14 04:14  csnmd  阅读(302)  评论(0)  编辑  收藏  举报