css弹出窗口可拖动,css3 边缘 模糊

css 离线手册，网页css数据隐藏，全屏导航css装修教程，国外css网页模板下载，css3信息轮播图文，css3中bottom用途，css3 边缘 模糊

Popup {
position: absolute;
/* ... */
}

第一步，首先需要将弹出窗口的position属性设置为absolute，这样才能在弹出窗口中添加拖动效果。

var dragObject = null;
Popup.onmousedown = function(e) {
if (e.which != 1) return;
dragObject = this;
this.oldX = e.pageX;
this.oldY = e.pageY;
return false;
};
document.onmousemove = function(e) {
if (dragObject) {
var dX = e.pageX - dragObject.oldX;
var dY = e.pageY - dragObject.oldY;
dragObject.style.left = (parseInt(dragObject.style.left) + dX) + 'px';
dragObject.style.top = (parseInt(dragObject.style.top) + dY) + 'px';
dragObject.oldX = e.pageX;
dragObject.oldY = e.pageY;
return false;
}
};
document.onmouseup = function(e) {
dragObject = null;
};

接下来，需要在JavaScript中为弹出窗口添加mousedown、mousemove以及mouseup事件监听器，这样才能为弹出窗口添加拖动效果。在mousedown事件中，需要记录鼠标按下时的坐标值，并将dragObject设置为当前弹出窗口对象；在mousemove事件中，需要计算出鼠标移动的距离，并更新弹出窗口的位置；在mouseup事件中，需要将dragObject设置为null，取消弹出窗口的拖动效果。

.popup {
/* ... */
cursor: move;
}

最后，为弹出窗口添加一个鼠标样式，让用户更加直观地感受到弹出窗口的可拖动性。