twitter-bootstrap 可调整大小的模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34408969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizable Modal Popup
提问by dsg
I am trying to make a modal window resizable by clicking increase and decrease icons. The modal should also be positioned at the middle of the screen after each increase/decreaseclick.
我试图通过单击增加和减少图标来调整模式窗口的大小。每次increase/decrease单击后，模态也应位于屏幕中间。
So far, only increase is working. Can anyone shed light on what I am doing wrong?
到目前为止，只有增加才起作用。任何人都可以阐明我做错了什么吗？
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;
}
}
outPopUpis the class where I override bootstrap css for changing the modal window position.
outPopUp是我覆盖引导 css 以更改模式窗口位置的类。
As far as I can see in the DOM explorer, .popup is not assigned to the element and hence increase/decrease height is not working.
就我在 DOM 资源管理器中看到的而言， .popup 没有分配给元素，因此增加/减少高度不起作用。
采纳答案by JeffS
JQuery already has the functions you need to accomplish this.
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">×</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>