bootStrap模态框实现可拖拽、半透明功能_ttkbootstrap 半透明组件-优快云博客

这篇博客介绍了如何通过jQuery为BootStrap模态框添加拖拽功能和调整模态框透明度。通过监听鼠标事件，实现了在模态框头部点击后可以拖动模态框，并在拖动过程中动态改变模态框位置。同时，通过添加鼠标按下和抬起事件，实现在拖动期间将模态框内容变为半透明，鼠标松开后恢复到正常状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
模态框
<br>


<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" id="mybtn">
fdsf
</button>

<div class="modal" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>

<div id="div1"
style="border: 1px solid black; width: 200px; height: 100px;"></div>
<input type="button" value="sss" id="btn1">

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {

})

var flg = "no";
var x0 = 0;
var y0 = 0;
var x_down = 0;
var y_down = 0;
$("#mybtn").click(function() {
$('#myModal').modal();
});
$(".modal-header").mousedown(function(e) {
flg = "yes";
x0 = e.pageX;
y0 = e.pageY;
x_down = $(".modal-dialog").offset().left;
y_down = $(".modal-dialog").offset().top;
$("#div1").html(flg + ";x0=" + x0 + ",y0=" + y0);
$(".modal-content").css( {
"opacity" : "0.6",
});
});
$(".modal-header").mouseup(function(e) {
flg = "no";
$("#div1").html(flg);
$(".modal-content").css( {
"opacity" : "1",
});
});
$(".modal-header").mousemove(function(e) {

if (flg == "yes") {
var x1 = e.pageX;
var y1 = e.pageY;
//$("#div1").html("move;x0="+x0+",y0="+y0+";x1="+x1+",y1="+y1+";x="+x+",y="+y);
$(".modal-dialog").css( {
"position" : "absolute",
"left" : x1-x0+x_down + "px",
"top" : y1-y0+y_down-27 + "px"
});

}

});
</script>
</body>
</html>