可调整大小的模式弹出式菜单

我想通过点击增加和减少图标来调整窗口大小。模式也应该位于屏幕中间后每个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

可调整大小的模式弹出式菜单

回答

相关问题