接上文 簡單的彈出拖拽窗口（一）
下面開始具體分析代碼部分：
首先我們先確認下結構：
懸浮窗口：初始不可見。包括標題欄和內容欄，標題欄內有標題和關閉按鈕。
遮罩層：初始不可見。用於設置彈出懸浮窗口時的半透明背景，
按鈕：用於點擊彈出懸浮窗口。
下面進行詳細解釋
1.要讓窗口能自由移動，那么窗口的定位（position）應該采用絕對定位（absolute）；
/*登錄浮層組件*/
1 .popup{ 2 display:none; /*初始隱藏*/ 3 width: 380px; 4 height: auto; /*高度自由，因為不確定，內容多少。*/ 5 border: 1px solid #D5D5D5; 6 background: #fff; /*窗口內容不透明，背景為白色*/ 7 box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); 8 -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); 9 -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); /*內容窗口帶陰影*/ 10 border-radius: 8px; /* 所有角都使用半徑為8px的圓角，此屬性為CSS3標准屬性 */ 11 -moz-border-radius: 8px; /* Mozilla瀏覽器的私有屬性 */ 12 -webkit-border-radius:8px; /* Webkit瀏覽器的私有屬性 */ /*窗口圓角*/ 13 position: absolute; 14 top: 100px; 15 left: 100px; /*絕對定位*/ 16 z-index: 9000; 17 }
2.給窗口添加標題欄，同時將標題欄的鼠標光標設置為拖動（move）形狀（在chrome中拖動的時候，光標會變成文字光標，松開鼠標鍵后恢復），這里需要對標題欄的左上角和右上角設置一下圓角。
/*標題欄區域*/
1 .popup_title{ 2 height: 48px; 3 line-height: 48px; /*使垂直居中*/ 4 padding:0px 20px; /*使距離左邊有一定距離*/ 5 background: #f5f5f5; /*背景顏色*/ 6 border-bottom: 1px solid #efefef; /*底邊框*/ 7 border-radius:8px 8px 0 0; /* 左上角和右上角使用半徑為5px的圓角，此屬性為CSS3標准屬性 */ 8 -moz-border-radius: 8px 8px 0 0; /* Mozilla瀏覽器的私有屬性 */ 9 -webkit-border-radius:8px 8px 0 0; /* Webkit瀏覽器的私有屬性 */ /*窗口圓角*/ 10 color: #535353; 11 font-size: 16px; /*字體顏色和字體大小*/ 12 cursor: move; /*可移動樣式*/ 13 -moz-user-select: none; /* Firefox all */ 14 -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ 15 -ms-user-select: none; /*IE10*/ 16 -khtml-user-select: none; /*早期瀏覽器*/ 17 user-select:none; 18 -o-user-select: none; /* 以上兩個屬性目前並未支持，寫在這里為了減少風險 */ 19 }
這里有幾個知識點需要理解：
1. css3(border-radius)邊框圓角
border-radius 是一種縮寫方法。另外其四個值是按照top-left、top-right、bottom-right、bottom-left的順序來設置的其主要會有下面幾種情形出現：
- 只有一個值，那么 top-left、top-right、bottom-right、bottom-left 四個值相等。
- 有兩個值，那么 top-left 等於 bottom-right，並且取第一個值；top-right 等於 bottom-left，並且取第二個值
- 有三個值，其中第一個值是設置top-left;而第二個值是 top-right 和 bottom-left 並且他們會相等,第三個值是設置 bottom-right。
- 有四個值，其中第一個值是設置 top-left 而第二個值是 top-right 第三個值 bottom-right 第四個值是設置 bottom-left。
支持的瀏覽器：
如果還是不太明白的話，這里有兩篇文章可以參考一下.一篇是阮一峰的CSS3圓角詳解,另一篇是w3cplus的CSS3的圓角Border-radius，如果你能讀完並理解這兩篇文章，那么基本上CSS3圓角Border-radius的知識你就掌握的差不多了。
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）：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <div unselectable="on" style="background:#CCC;" >unselectable=on </div> 5 <br/> 6 <div style="background:#CCC;-webkit-user-select:none;" >-webkit-user-select:none;</div> 7 <br/> 8 <div style="background:#CCC;-moz-user-select:none;" >-moz-user-select:none;</div> 9 <br/> 10 <div style="background:#CCC;" onselectstart="return false;" >onselectstart="return false;"</div> 11 </body> 12 </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" ，保證各瀏覽器都可以禁止內容選中。
如案例中給懸浮差彈出窗的標題欄設置禁止選中樣式，可以這樣設置：
1 <div class="popup_title" id="popup_title" unselectable= "on" > 2 登錄 3 <a href="javascript:hidepopup();" class="popup_closebutton"></a> 4 </div>
1 .popup_title{ 2 -moz-user-select: none; /* Firefox all */ 3 -webkit-user-select: none; /* Chrome all / Safari all /opera15+*/ 4 -ms-user-select: none; /*IE10*/ 5 -khtml-user-select: none; /*早期瀏覽器*/ 6 user-select:none; 7 -o-user-select: none; /* 以上兩個屬性目前並未支持，寫在這里為了減少風險 */ 8 }
注意：本文為原創，轉載請以鏈接形式標明本文地址 ，謝謝合作。
本文地址：http://www.cnblogs.com/wanghuih/p/5576910.html