您好我正在使用JQuery响应式数据表和引导程序弹出模式，两者都工作正常，我想制作弹出式拖拽gable并重新调整大小。下面的代码用于数据表和弹出式拖拽，但弹出重新大小不起作用。我尝试了一个示例弹出代码，它可以正常工作，拖动和重新大小，但当我使用J - 弹出不起作用的查询数据表。下面是我的代码，我评论了jquery.min.js文件，现在响应式数据表和带有拖拽的弹出窗口正在工作，但不是重新大小工作。如果我取消注释jquery.min.js文件弹出窗口将无法正常工作。请告诉我错在哪里。我是否需要添加或删除任何css或js文件。以下是我的完整代码。
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/new/new.js"></script>
<link href="resources/new/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/new/moment.min.js"></script>
<script type="text/javascript" src="resources/new/bootstrap-datetimepicker.min.js"></script>
//datatable filter and proper
<link href="resources/new/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/jquery.dataTables.min.js"> </script>
//filter every column
<link href="resources/new/dataTables.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="resources/new/dataTables.responsive.min.js"> </script>
//responsive datatable
<link href="resources/new/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- <script type="text/javascript" src="resources/new/jquery.min.js"> </script> -->
<script type="text/javascript" src="resources/new/jquery-ui.min.js"> </script>
<!-- jstl tag library -->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="management.tcs.com.entity.*,management.tcs.com.services.*,management.tcs.*,java.util.*"%>
<script>
$(document).ready(function() {
//alert("asas");
showModal1();
window.setInterval(function() {
showModal1();
}, 10000);
} );
</script>
<script type="text/javascript" >
function showModal1(){
var j=0;
var formURL = "<c:url value='/LiveUpdate1' />";
$.ajax({
url : formURL,
data : {
},
type : "GET",
success : function(data, textStatus, jqXHR) {
//Live updated values getting through ajax
var table =' <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="98%"> <thead>';
table +=' <tr class="success">';
table +='<th>SNo</th>';
table +='<th>Sender</th>';
table +='<th>Recipient</th>';
table +='<th>Delivery Status</th>';
table +='<th>Read Status</th>';
table +='</tr>';
table +='</thead>';
table +='<tbody>';
for(var i=0;i<data.u.length;i++)
{
j++;
table += '<tr>';
table += '<td>'+j+'</td>';
table += '<td>'+data.u[i].sender+'</td>';
table += '<td>'+data.u[i].receiver+'</td>';
table += '<td><a href="javascript:showModal(\''+data.u[i].message_id+'\')"style="color: blue;">'+data.u[i].sts.delivery_status+'</a></td>';
table += '<td><font color="red">'+data.u[i].sts.read_status+'</td>';
table += '</tr>';
}
table +='</tbody>';
table +='</table>';
$("#re").html(table);
//add here
$('#example').DataTable( {
"pagingType": "full_numbers",
"searching": true,
} );
}
})
}
//popup table based on message id
function showModal(id){
//alert(id);
var j=0;
console.log(id);
var formURL = "<c:url value='/EndToEndServlet' />";
$.ajax({
url : formURL,
data : {
"messageid" : id
},
type : "GET",
success : function(data, textStatus, jqXHR) {
var table1='<div style="overflow-x:scroll;">';
table1 +=' <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="98%"> <thead>';
table1 +=' <tr class="success">';
table1 +='<th>Sender</th>';
table1 +='<th>Recipient</th>';
table1 +='<th>Mail Origin Time</th>';
table1 +='<th>Precedence</th>';
table1 +='<th>Subject</th>';
table1 +='</tr>';
table1 +='</thead>';
table1 +='<tbody>';
table1 += '<tr>';
table1 += '<td>'+data.u[0].sender+'</td>';
table1 += '<td>'+data.u[0].receiver+'</td>';
table1 += '<td>'+data.u[0].mail_orig_time+'</td>';
table1 += '<td>'+data.u[0].precedence+'</td>';
table1 += '<td>'+data.u[0].subject+'</td>';
table1 += '</tr>';
table1 += '</tbody>';
table1 +='</table>';
table1 +='</div>';
$("#resp1").html(table1);
$("#myModal").modal('show');
$('.modal-dialog').draggable({
"handle":".modal-header"
});
$('.modal-content').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});
}
});
}
</script>
</head>
<body>
<div class="container-fluid" style="background:#cdeaf5;">
<div id="re"></div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog model-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" align="center">Mail Tracking</h3>
</div>
<div class="modal-body">
<div id="resp1"></div>
</div>
<div class="modal-body">
<div id="resp"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
你可以像下面的代码那样做：
$('.modal-content').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('.modal-dialog').draggable();
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" 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">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</body>