接上文JavaScript簡單實現彈出拖拽窗口（一）進行學習。
下面開始具體分析代碼部分：
首先我們先確認下結構：
懸浮窗口：初始不可見。包括標題欄和內容欄，標題欄內有標題和關閉按鈕。
遮罩層：初始不可見。用於設置彈出懸浮窗口時的半透明背景，
按鈕：用於點擊彈出懸浮窗口。
下面進行詳細解釋
1、要讓窗口能自由移動，那麼窗口的定位（position）應該採用絕對定位（absolute）；
/*登錄浮層組件*/.popup{ display:none; /*初始隱藏*/ width: 380px; height: auto; /*高度自由，因為不確定，內容多少。 */ border: 1px solid #D5D5D5; background: #fff; /*窗口內容不透明，背景為白色*/ box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); /*內容窗口帶陰影*/ border-radius: 8px; /* 所有角都使用半徑為8px的圓角，此屬性為CSS3標準屬性*/ -moz-border-radius: 8px; /* Mozilla瀏覽器的私有屬性*/ -webkit-border-radius:8px; /* Webkit瀏覽器的私有屬性*/ /*窗口圓角*/ position: absolute; top: 100px; left: 100px; /*絕對定位*/ z-index: 9000; }2.給窗口添加標題欄，同時將標題欄的鼠標光標設置為拖動（move）形狀（在chrome中拖動的時候，光標會變成文字光標，鬆開鼠標鍵後恢復），這裡需要對標題欄的左上角和右上角設置一下圓角。
/*標題欄區域*/.popup_title{ height: 48px; line-height: 48px; /*使垂直居中*/ padding:0px 20px; /*使距離左邊有一定距離*/ background: #f5f5f5; /*背景顏色*/ border-bottom: 1px solid #efefef; /*底邊框*/ border-radius:8px 8px 0 0; /* 左上角和右上角使用半徑為5px的圓角，此屬性為CSS3標準屬性*/ -moz-border-radius: 8px 8px 0 0; /* Mozilla瀏覽器的私有屬性*/ -webkit-border-radius:8px 8px 0 0; /* Webkit瀏覽器的私有屬性*/ /*窗口圓角*/ color: #535353; font-size: 16px; /*字體顏色和字體大小*/ cursor: move; /*可移動樣式*/ -moz-user-select: none; /* Firefox all */ -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期瀏覽器*/ user-select:none; -o-user-select: none; /* 以上兩個屬性目前並未支持，寫在這里為了減少風險*/ }這裡有幾個知識點需要理解：
1. css3(border-radius)邊框圓角
border-radius 是一種縮寫方法。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設置的其主要會有下面幾種情形出現：
1.只有一個值，那麼top-left、top-right、bottom-right、bottom-left 四個值相等。
2.有兩個值，那麼top-left 等於bottom-right，並且取第一個值；top-right 等於bottom-left，並且取第二個值
3.有三個值，其中第一個值是設置top-left;而第二個值是top-right 和bottom-left 並且他們會相等,第三個值是設置bottom-right。
4.有四個值，其中第一個值是設置top-left 而第二個值是top-right 第三個值bottom-right 第四個值是設置bottom-left。
支持的瀏覽器：
2. cursor: move
cursor 屬性規定所顯示的指針（光標）的類型。
屬性值為move時，表示此光標所指的對像是可以移動的，通常為一個交叉箭頭，如圖。
3.user-select：用來控制內容的可選擇性
auto――默認值，用戶可以選中元素中的內容
none――用戶不能選擇元素中的任何內容
text――用戶可以選擇元素中的文本
element――文本可選，但僅限元素的邊界內(只有IE和FF支持)
需要注意的是：user-select並不是一個W3C的CSS標準屬性，瀏覽器支持的不完整，需要對每種瀏覽器進行調整
user-select說明：
設置或檢索是否允許用戶選中文本。
(1)IE6-9不支持該屬性，但支持使用標籤屬性onselectstart="return false;" 來達到user-select:none 的效果；Safari和Chrome也支持該標籤屬性；
(2)直到Opera12.5仍然不支持該屬性，但和IE6-9一樣，也支持使用私有的標籤屬性unselectable="on" 來達到user-select:none 的效果；
(3)unselectable 的另一個值是off；除Chrome和Safari外，在其它瀏覽器中，如果將文本設置為-ms-user-select:none;，則用戶將無法在該文本塊中開始選擇文本。
不過，如果用戶在頁面的其他區域開始選擇文本，則用戶仍然可以繼續選擇將文本設置為-ms-user-select:none; 的區域文本.
分析以下代碼（注意：此代碼及此代碼的分析結果來自w3help）：
<!DOCTYPE html><html><body> <div unselectable="on" style="background:#CCC;" >unselectable=on </div> <br/> <div style="background:#CCC;-webkit-user-select:none;" >-webkit-user-select:none;</div> <br/> <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div> <br/> <div style="background:#CCC;" onselectstart="return false;" >onselectstart="return false;"</div></body></html>
在各瀏覽器中效果如下：
注1：可以禁止內容選中。
注2：沒有禁止內容選中。
可見，禁止內容選中的方法如下：
IE 給標籤設置unselectable= "on" ，設置標籤方法onselectstart="return false;"
Firefox 給標籤設置私有樣式-moz-user-select:none 。
Chrome Safari 給標籤設置私有樣式-webkit-user-select:none ，設置標籤方法onselectstart="return false;"。
Opera 給標籤設置unselectable= "on"
解決方案
給標籤設置樣式-moz-user-select:none ;-webkit-user-select:none 同時標籤設置unselectable= "on" ，保證各瀏覽器都可以禁止內容選中。
如案例中給懸浮差彈出窗的標題欄設置禁止選中樣式，可以這樣設置：
<div id="popup_title" unselectable= "on" > 登錄<a href="javascript:hidepopup();"></a></div>
.popup_title{ -moz-user-select: none; /* Firefox all */ -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期瀏覽器*/ user-select:none; -o-user-select: none; /* 以上兩個屬性目前並未支持，寫在這里為了減少風險*/ }注意：本文為原創，地址：http://www.cnblogs.com/wanghuih/p/5576910.html
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。