Jquery彈出窗口實例

首先我先總結一下在這個例子中學到的東西：

1)讓div塊隱藏可以用css屬性display:none
2)學會在firefox中調試css
3)讓div塊顯示的三種方法
4)讓div塊隱藏的三種方法

1.html頁面

<html>
<head>
<title>itcast.cn的JQuery實例1：浮動窗口</title>

<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/jquerywin.js"></script>
  
<link type="text/css" rel="stylesheet" href="css/win.css" />
</head>
<body>
    <a οnclick="showwin()" href="#">顯示浮動窗口</a>
    
    
    
    <div id="win">
        <div id="title">我是標題欄啊！！

<span id="close" οnclick="hide()">X</span></div>
<div id="content">我是一個窗口哦！！</div>
</div>

</body>
</html>

2.css文件

/*id選擇器*/
#win {
    /*希望窗口有邊框*/
    border: 1px red solid;
    /*希望窗口寬度和高度固定，不要太大*/
    width: 300px;
    height: 200px;
    /*希望控制窗口的位置*/
    position: absolute; /*絕對定位*/
    top: 100px;
    left: 350px;
    /*希望窗口開始時不可見*/
    display: none;
}

/*控制標題欄的樣式*/
#title {
    /*控制標題欄的背景色*/
    background-color: blue;
    /*控制標題欄中文字的顏色*/
    color: yellow;
    /*控制標題欄的左內邊距*/
    padding-left:3px;
}

/*控制內容區域的樣式*/
#content {
    padding-left: 3px;
    padding-top: 5px
}
/*控制關閉按鈕的位置*/
#close {
    /*使關閉按鈕向右側移動*/
    margin-left: 158px;
    /*讓鼠標進入時可以顯示小手，告知用戶可以點擊操作*/
    cursor: pointer;
}

3.js代碼

//顯示浮動窗口的方法
function showwin() {
    //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");

}