CSS彈窗是網頁設計中常用的功能，可以讓用戶進行交互并看到特定的信息。而在實際開發中，我們常常需要自定義彈窗，比如可以讓用戶拖動彈窗位置，以達到更好的用戶體驗。

// 彈窗對應的HTML代碼
<div class="dialog">
<div class="titleBar">
<span class="title">彈窗標題</span>
<span class="closeBtn">×</span>
</div>
<div class="content">
彈窗內容
</div>
</div>
// CSS樣式
.dialog{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
}
.titleBar{
height: 30px;
width: 100%;
background-color: #f5f5f5;
cursor: move;
}
.title{
display: inline-block;
margin-left: 10px;
font-size: 14px;
color: #333;
}
.closeBtn{
display: inline-block;
float: right;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
}
.content{
padding: 10px;
font-size: 16px;
color: #666;
}
// JS代碼
var dialog = document.querySelector('.dialog');
var titleBar = document.querySelector('.titleBar');
var isDrag = false;//標識是否拖動
// 鼠標按下事件
titleBar.addEventListener('mousedown',function(event){
isDrag = true;
// 計算鼠標與彈窗的偏移量，方便后續計算新位置
offsetX = event.clientX - dialog.offsetLeft;
offsetY = event.clientY - dialog.offsetTop;
});
// 鼠標移動事件
titleBar.addEventListener('mousemove',function(event){
 if(isDrag){
// 計算新位置
left = event.clientX - offsetX;
top = event.clientY - offsetY;
// 邊界限制，不超過瀏覽器窗口
if(left< 0) left = 0;
if(top< 0) top = 0;
if(left >document.documentElement.clientWidth - dialog.offsetWidth)
left = document.documentElement.clientWidth - dialog.offsetWidth;
if(top >document.documentElement.clientHeight - dialog.offsetHeight)
top = document.documentElement.clientHeight - dialog.offsetHeight;
// 修改位置
dialog.style.left = left + 'px';
dialog.style.top = top + 'px';
}
});
// 鼠標松開事件
titleBar.addEventListener('mouseup',function(event){
isDrag = false;
});

上述代碼通過CSS和JS實現了彈窗可拖動的功能。在CSS中，設置了彈窗的基本樣式，并為標題欄添加了鼠標拖動的樣式（cursor:move）。在JS中，添加了mousedown、mousemove、mouseup等事件，監聽用戶的拖動操作，并計算新位置、邊界限制等操作。

通過實現此功能，不僅可以增加網頁的交互性和可用性，還能提高用戶的使用體驗。同時，可以參考此代碼，根據實際需求進行更多的自定義操作。