<%@ 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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<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 trigger modal -->
<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>
<!-- Modal -->
<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>
转载请注明原文地址: https://ju.6miu.com/read-1296390.html
