(Update: Now with better overflow handling.)
I have been doing more CSS + JS as I would have liked these past months. I am still a newbie but today I did something which I am happy enough about to make it into a short blog post.
Twitter’s Bootstrap CSS framework is a nice basis to get your web page going. It also has modal windows. JQuery has the resizable function which allows to add resize handles to any div. In order to make this work with a Bootstrap modal I did the following things:
1. Slightly change the positioning of the jQuery resize handles so they do not force scrollbars on the Bootstrap modal and do not add a weird border:
.ui-resizable-s {
bottom: 0;
}
.ui-resizable-e {
right: 0;
}
2. A little bit of JS magic to properly reposition the modal once it has been resized:
$(".modal").on("resize", function(event, ui) {
ui.element.css("margin-left", -ui.size.width/2);
ui.element.css("margin-top", -ui.size.height/2);
ui.element.css("top", "50%");
ui.element.css("left", "50%");
$(ui.element).find(".modal-body").each(function() {
$(this).css("max-height", 400 + ui.size.height - ui.originalSize.height);
});
});
Just look at the Bootstrap modal’s margin in Firebug or something similar to understand the first two statements. The top and left values are to fix the positioning in Opera. The last statement is to also resize the modal body for proper overflow handling.
Now just enable resize on all modals or on whatever modal you want:
$(".modal").resizable();
Trueg's Blog 
Thanks for this blog post! I had to modify your code slightly to keep the modal from breaking up … mainly the .modal-body was not receiving the correct max-height and need to to take the modal-header and modal-footer height into consideration on resize. I also needed to remove the 20px bottom margin bootstrap modal applies by default.
In the end, here’s the code …
$( “.modal” ).resizable();
$(“.modal”).on(“resize”, function(event, ui) {
ui.element.css(“margin-left”, -ui.size.width/2);
ui.element.css(“margin-top”, -ui.size.height/2);
ui.element.css(“top”, “50%”);
ui.element.css(“left”, “50%”);
ui.element.css(“height”, ui.size.height + $(‘.modal-footer’).outerHeight() );
$(ui.element).find(“.modal-body”).each(function() {
$(this).css(“max-height”, ui.size.height – $(‘.modal-header’).outerHeight() – $(‘.modal-footer’).outerHeight() );
});
});
.modal-body{
margin-bottom: 0;
}
Thanks for the tip!! For the magic, 2), may I suggest having a go at this instead… it saves the original heights of elements instead of the hardcoded “400″ pixels:
$(“.modal”).on(“resizestart”, function(event, ui) {
$(ui.element).find(“.modal-body, iframe”).each(function() {
elem = $(this);
elem.data(“resizeoriginalheight”, elem.height());
});
});
$(“.modal”).on(“resize”, function(event, ui) {
ui.element.css(“margin-left”, -ui.size.width/2);
ui.element.css(“margin-top”, -ui.size.height/2);
ui.element.css(“top”, “50%”);
ui.element.css(“left”, “50%”);
$(ui.element).find(“.modal-body,iframe”).each(function() {
elem = $(this);
$(this).css(“min-height”, elem.data(“resizeoriginalheight”) + ui.size.height – ui.originalSize.height);
});
});
Hi, i was having a lot of trouble getting this to work. Would you mind posting a full example including your head section? I keep getting this exception:
Uncaught TypeError: Object [object Object] has no method ‘resizable’
on this line:
$(“.modal”).resizable();
I checked my chrome logs, and all the the js and css files are loading fine.. any tips would be much appreciated. I must be missing something really simple.
Make sure you load Bootstrap UI