Resizable Modal Popup

Question

Я пытаюсь сделать modal window resizable, щелкнув значок увеличения и уменьшения. Модальный также должен быть расположен в середине экрана после каждого increase/decrease щелчок.

Пока что только увеличение работает. Может ли кто-нибудь пролить свет на то, что я делаю неправильно?

this.increaseModal = function() { 
     var maxHeight = ($(window).height() * 90)/100; 
     var maxWidth = ($(window).width() * 90)/100; 
     var height = ($(window).height() * 10)/100; 
     var width = ($(window).width() * 10)/100; 
     if ($('.modal-content').height() <= maxHeight - 100) { 
      $('.modal-content').height($('.modal-content').height() + height); 
      increaseHeightCount = increaseHeightCount + 1; 
     } 
     if ($('.modal-content').width() <= maxWidth - 100) { 
      $('.modal-content').width($('.modal-content').width() + width); 
      increaseWidthCount = increaseWidthCount + 1; 
     } 
     $('.modal-dialog').draggable(); 
     $('#myModal').addClass('outPopUp'); 
    } 

this.decreaseModal = function() { 
    var maxHeight = ($(window).height() * 90)/100; 
    var maxWidth = ($(window).width() * 90)/100; 
    var height = ($(window).height() * 10)/100; 
    var width = ($(window).width() * 10)/100; 
    if (increaseWidthCount > 0) { 
     $('.modal-content').width($('.modal-content').width() - width); 
     increaseWidthCount = increaseWidthCount - 1; 
    } 
    if (increaseHeightCount > 0) { 
     $('.popup').height($('.popup').height() - height); 
     increaseHeightCount = increaseHeightCount - 1; 
    } 
} 

outPopUp класс, где я переопределить самозагрузки CSS для изменения модального положения окна.

Насколько я могу видеть в DOM-проводнике, popup не присваивается элементу, и, следовательно, увеличение/уменьшение высоты не работает.

Answer 1

У JQuery уже есть функции, необходимые для этого.

$('.modal-content').resizable({ 
 
    //alsoResize: ".modal-dialog", 
 
    //minHeight: 150 
 
}); 
 
$('.modal-dialog').draggable(); 
 

 
$('#myModal').on('show.bs.modal', function() { 
 
    $(this).find('.modal-body').css({ 
 
     'max-height':'100%' 
 
    }); 
 
});

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

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

https://jsfiddle.net/p7o2mkg4/