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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
thesolver commentedJan 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:
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