Resizable Modal Popup
18,833
JQuery already has the functions you need to accomplish this.
$('.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>
https://jsfiddle.net/p7o2mkg4/
Author by
aka17
Updated on June 06, 2022Comments
-
aka17 almost 2 years
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/decrease
click.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; } }
outPopUp
is the class where I override bootstrap css for changing the modal window position.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.
-
Gabe over 5 yearsJust for clarification, this functionality is part of the jQuery UI library.