Bootstrap Responsive Modal

modal-responsive.css

// 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; }
}

modal-responsive.js

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);

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