bootstrap modal鼠标按下的时候可以移动
时间: 2023-08-05 17:06:36 浏览: 131
是的,Bootstrap Modal 鼠标按下的时候可以移动。你可以使用 jQuery 的 mousedown、mousemove 和 mouseup 事件来实现拖动效果。下面是一个示例代码:
```html
<!-- 给Modal添加一个id,例如"myModal" -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal内容 -->
</div>
</div>
</div>
<script>
$(document).ready(function() {
var isDragging = false;
var mouseDownX, mouseDownY;
// 鼠标按下事件
$('#myModal .modal-header').mousedown(function(e) {
isDragging = true;
mouseDownX = e.pageX;
mouseDownY = e.pageY;
});
// 鼠标移动事件
$(document).mousemove(function(e) {
if (isDragging) {
var offsetX = e.pageX - mouseDownX;
var offsetY = e.pageY - mouseDownY;
$('#myModal').css({
'left': $('#myModal').position().left + offsetX,
'top': $('#myModal').position().top + offsetY
});
mouseDownX = e.pageX;
mouseDownY = e.pageY;
}
});
// 鼠标松开事件
$(document).mouseup(function() {
isDragging = false;
});
});
</script>
```
在上面的代码中,我们首先给 Modal 添加了一个 id,例如 "myModal"。然后,在 jQuery 的 ready() 函数中,我们使用 mousedown、mousemove 和 mouseup 事件来实现拖动效果。当鼠标按下时,我们记录下鼠标的位置。当鼠标移动时,我们计算出鼠标的偏移量,并将 Modal 的位置移动相应的距离。当鼠标松开时,我们停止拖动。
阅读全文