jQuery浮動窗是網頁設計中經常使用的一種交互效果。它可以在頁面中彈出一個浮動窗口，使用戶更方便地進行操作。下面我們來學習如何使用jQuery的DIV浮動窗。

// HTML代碼
我是浮動窗標題
我是浮動窗內容
// CSS代碼
#floatWin {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
// jQuery代碼
$(document).ready(function(){
// 點擊按鈕彈出浮動窗
$('#btnOpen').click(function(){
$('#floatWin').fadeIn();
});
// 點擊浮動窗以外的區域關閉浮動窗
$(document).mouseup(function(e){
var _con = $('#floatWin');   //浮動窗口
if(!_con.is(e.target) && _con.has(e.target).length === 0){
_con.fadeOut();
}
});
});

上述代碼中，我們首先定義了一個帶有ID為“floatWin”的DIV元素，用于作為浮動窗口的容器。然后設置了該元素的CSS樣式，包括了其固定定位、居中顯示和一些其他的樣式屬性。

接下來的jQuery代碼中，我們定義了一個“document.ready”事件函數，該函數用于在頁面加載完成后執行一些操作。首先我們定義了一個點擊事件，用于當用戶點擊頁面上的按鈕時，彈出浮動窗口。其次，我們定義了一個鼠標彈起事件，用于當用戶在浮動窗口以外的區域點擊時，關閉浮動窗口。

以上就是使用jQuery實現DIV浮動窗的過程，你還可以通過修改上述代碼來實現更加豐富的效果。希望本文對您有所幫助。