Bootstrap модальный изменяемого размера и перетаскиваемый - PullRequest
Новая
       13

Bootstrap модальный изменяемого размера и перетаскиваемый

0 голосов
/ 04 января 2019

Я пытаюсь преобразовать мой модал в изменяемый и изменяемый размер.Я пробовал возможные решения, такие как .resizable и .draggable функции jquery.

Я включил 

    <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>

Iпробовал 

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

и 

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

Я ожидаю, что модальный режим будет перетаскиваемым и изменяемого размера.

Изображение всех включенных скриптов:

.

...