我正在尝试将模式转换为可调整大小和可拖动的模式。我尝试过可能的解决方案,例如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">×</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({
});
我希望模态是可拖动和可调整大小的。
已包含所有脚本的图像: