可調整大小的模式彈出式菜單

我想通過點擊增加和減少圖標來調整窗口大小。模式也應該位於屏幕中間後每個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沒有分配給元素，因此增加/減少高度不起作用。

來源

2015-12-22 dsg

喜，是提高工作？因爲在頂部，你說的是正在工作，但在最低層你說的是行不通的。你還可以顯示你的HTML彈出？謝謝！ – cweitat

繼續@dsg寫道，請創建一個[小提琴]（http://jsbin.com/）或（甚至更好）爲您的問題添加一個片段，以便我們可以看到問題。看到[如何問]（http://stackoverflow.com/help/how-to-ask） –

點擊增加圖標，模態寬度增加..不是高度。減少完全不起作用，定位不會變爲屏幕中間。 – dsg

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/

來源

2015-12-22 19:12:18 JeffS

可調整大小的模式彈出式菜單

回答

相關問題