Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap Responsive Modal
// Responsive shizzle
@media (max-width: 767px) {
// Modals
.modal {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
}
.modal.fade.in { top: 20px; }
.modal-body {
overflow: visible;
max-height: none;
}
}
@media (max-width: 480px) {
// Modals
.modal {
top: 10px;
left: 10px;
right: 10px;
}
.modal.fade.in { top: 10px; }
}
var adjustModal = function($modal) {
var $window = $(window),
fixed = $modal.css('position') == 'fixed',
top = ($window.height() - $modal.height()) / 2;
if ($window.width() <= 767 && $modal.height() >= $window.height() - 10) {
top = $window.scrollTop() + 10;
} else if (!fixed) {
top += $window.scrollTop();
}
$modal.stop().animate({ 'top': top }, "fast");
};
var show = function() {
var $modal = $(this);
adjustModal($modal);
};
var checkShow = function() {
$('.modal').each(function() {
var $modal = $(this);
if ($modal.css('display') !== 'block') return;
adjustModal($modal);
});
};
var modalWindowResize = function() {
$('.modal').not('.modal-gallery').on('show', show).on('loaded', show);
$('.modal-gallery').on('displayed', show);
checkShow();
};
$(modalWindowResize);
$(window).resize(modalWindowResize);
@thesolver

This comment has been minimized.

Copy link

thesolver commented Jan 3, 2013

Hi Brad,

Just one suggestion. Right now (if I am catching it right), all your functions are in the JavaScript global namespace. If you just wrap it in a self-executing function:

(function ($) {
    var adjustModal = function ($modal) {
        var $window = $(window),

....

})(jQuery);

The way I call it also allows you to use the $ alias for jQuery even if someone has jQuery in noconflict mode.

Thanks for this snippet...it gave me some ideas. I still haven't figured out what to do with the iPhone, Kindle Fire HD, and so on...which report their widths as 980px...so this doesn't kick in.

Take care,

Alan

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.