How to resize Twitter Bootstrap modal dynamically based on the content
Since your content must be dynamic you can set the css properties of the modal dynamically on show
event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
So you can add inline styles dynamically using jquery css
method:
For newer versions of bootstrap use show.bs.modal
$('#modal').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
For older versions of bootstrap use show
$('#modal').on('show', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
or use a css rule to override:
.autoModal.modal .modal-body{
max-height: 100%;
}
and add this class autoModal
to your target modals.
Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo
Newer version of bootstrap see the available event names
.
- show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
- shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
- hide.bs.modal This event is fired immediately when the hide instance method has been called.
- hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
- loaded.bs.modal This event is fired when the modal has loaded content using the remote option.
Older version of bootstrap modal events supported.
- Show - This event fires immediately when the show instance method is called.
- shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
- hide - This event is fired immediately when the hide instance method has been called.
- hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
How to resize Twitter Bootstrap modal dynamically based on data content
Your code don't catch the element that open the modal:
var class = $(this).data('class');
in this context this
refer to modal.
Furthermore, class
is a reserved words in ECMAScript5/6 (you cannot use it as variable name).
To grab the correct data-class
value, you can use relatedTarget
property of the event
(passed as function argument).
Finally, remove any css classes that may be present and add the correct class:
$('#myModal').on('show.bs.modal', function (event) {
var _trigger = $(event.relatedTarget)
var _class = _trigger.data('class');
$(this)
.find('.modal-dialog')
.removeClass('modal-lg modal-sm')
.addClass( _class);
});
Demo: https://codepen.io/anon/pen/XzQByR
PS I use show.bs.modal
event, because it is fired immediately when the show instance method is called (see the docs) and, in the demo, I use <button>
instead of <a>
Bootstrap Modal Dynamic Width
inline-block
elements get dynamic width regarding their content.
body .modal-dialog { /* Width */
max-width: 100%;
width: auto !important;
display: inline-block;
}
Note: width: auto !important;
is required to overwrite bootstrap css.
Finally to place it in middle of viewport you to display: flex;
on the parent element
.modal {
z-index: -1;
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-open .modal {
z-index: 1050;
}
re-size the modal dialog in bootstrap dynamically
By default Bootstrap sets the width of the .modal-dialog
to 600px (large screens above 768 px) or auto(small screens). The code below overrides this:
$('#myModal').on('show.bs.modal', function () {
$(this).find('.modal-dialog').css({width:'auto',
height:'auto',
'max-height':'100%'});
});
(based on: https://stackoverflow.com/a/16152629/2260496)
To make it more dynamically you will need to calculate the width (jQuery width()
or innerwidth()
)of your table and set the width of the modal-dialog
according it.
See: http://bootply.com/88364
How to resize and animate Twitter's Bootstrap 2 modal window?
What should trigger the resize?
Look here: https://stackoverflow.com/a/245011/1596547 You can use this to resize your modal.
See: http://bootply.com/71672
For Twitter's Bootstrap 3, see: https://stackoverflow.com/a/18042644/1596547
html:
<div class="container">
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<!--long text--><a href="#" id="resize">Resize</a>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
javascript:
$('#resize').click(function(){$("#myModal").animate({width:"200px"},600,'linear');});
Keep the modal's position centered:
The centered position is set by a negative left-margin of the .modal class. The value of this negative left-margin will be half the width of the modal. So to keep the position centered when resizing try something like:
$("#myModal").animate({"width":"200px","margin-left":"-100px"},600,'linear');
Easings:
jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default easing), which progresses slightly slower at the beginning and end of the animation than it does in the middle of the animation.
jQuery UI provides several additional easing functions see: http://api.jqueryui.com/easings/
Or this plugin: http://gsgd.co.uk/sandbox/jquery/easing/ see also: http://easings.net/
bootstrap modal window dynamic width with max value?
You can optimize the height and width of the modal based on content in the following way--
working example
.modal-dialog{ position: relative; display: table; overflow-y: auto; overflow-x: auto; width: auto; min-width: 300px; }
<!DOCTYPE html><html>
<head><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head><body > <button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> <div class="modal fade" id="myModal" tabindex=-1 role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <p>close all the above tags w/o anything but standard div/span for modal message and footer............................................................................................................................................................................................</p> </div> </div> </div> </div></body>
</html>
Related Topics
How to Set Preview of Video File, Selecting from Input Type='File'
How to Take a Snapshot of HTML5-Javascript-Based Video Player
How to Disable an Input Type=Text
Inlining Ecmascript Modules in HTML
Jquery Duplicate Div into Another Div
Force Page Zoom at 100% with Js
Make Checkbox Behave Like Radio Buttons with JavaScript
How to Filter Input Type="File" Dialog by Specific File Type
Trigger Autocomplete Without Submitting a Form
Screen Scraping from a Web Page with a Lot of JavaScript
Bootstrap Dropdown Closing When Clicked
Clearing My Form Inputs After Submission
Saving and Loading an Image from Localstorage
Possible to Associate Label with Checkbox Without Using "For=Id"
Img-Src' Was Not Explicitly Set, So 'Default-Src' Is Used as a Fallback