Bootstrap模态可调整大小和可拖动

时间:2019-01-04 08:06:48

标签: javascript jquery modal-dialog bootstrap-modal

我正在尝试将模式转换为可调整大小和可拖动的模式。我尝试过可能的解决方案,例如jquery的.resizable和.draggable函数。

我包括了

    <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

可调整大小的功能和

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 

用于可拖动功能。当我使用这两个.js脚本进行拖拽时,其他datetimepicker脚本从

停止工作
    <link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
    <script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>.

此外,在那之后,我的模式也是不可拖动或不可调整的。

/* The Modal (background) */
.his_modal_style {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.his_modal_style-content {
   background-color: #fefefe ;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
   width: 55%;
   overflow: auto;
}


/* The Close2 Button */
.his_close {
color: #aaaaaa ;
float: right;
font-size: 28px;
font-weight: bold;
}

.his_close:hover,
.his_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}




 <div id="his_modal" class="his_modal_style">
 <div class="his_modal_style-content">
 <span class="his_close">&times;</span>
 /*Modal content*/

 </div>
 </div>

我尝试了

     $('.his_modal_style-content').draggable({
     handle: ".modal-header"
     });
     $('#his_modal_style').draggable({
     handle: ".modal-header"
     });

     $('.his_modal_style-content').resizable({
     });
     $('#his_modal_style').resizable({
     });

我希望模态是可拖动和可调整大小的。

已包含所有脚本的图像:

.

0 个答案:

没有答案