如何拖動和調整大小引導彈出模式

Question

您好我正在使用JQuery響應式數據表和引導彈出模式，兩者都工作正常，我想使該彈出式拖動山牆和重新大小。下面的代碼工作的數據表和彈出式拖曳gable，但彈出重新大小不起作用。我嘗試了一個示例彈出代碼它工作正常拖拽和重新大小，但當我使用J - 查詢數據表，彈出不工作。以下是我的代碼，我評論jquery.min.js文件，現在響應數據表和彈出式拖曳gable工作，但不重新大小工作。如果我取消註釋，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">&times;</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> 

Answer 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">&times;</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>