jquery.leanmodal.js

// fixes closing on click on https://gist.github.com/ctalkington/4093995
// and hides all modals before opening a new one so they don't pile up
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
// Dual licensed under the MIT and GPL

(function($){
  $.fn.extend({
    leanModal: function(options) {
      var defaults = {
        top: 100,
        overlay: 0.5,
        closeButton: ".modal_close",
        escapeClose: true,
        clickClose: true
      };

      options = $.extend(defaults, options);

      var overlay = $('<div id="lean-overlay"></div>');

      $('body').append(overlay);

      function close_modal(modal_id){
        $('#lean-overlay').fadeOut(200);
        $(modal_id).css({'display': 'none'});
        $(document).off('keydown.leanModal');
      }

      return this.each(function() {
        var o = options;

        $(this).click(function(e) {
          // Hides the rest of the modals, so in case you're opening
          // a modal from inside another modal, they don't pile up
          $('.modal').hide();

          var modal_id = $(this).attr('href');

          if (o.closeButton) {
            $(o.closeButton).one('click', function(e) {
              close_modal(modal_id);
              e.preventDefault();
            });
          }

          if (o.clickClose) {
            $('#lean-overlay').one('click', function(e) {
              close_modal(modal_id);
              e.preventDefault();
            });
          }

          if (o.escapeClose) {
            $(document).on('keydown.leanModal', function(event) {
              if (event.which === 27) {
                close_modal(modal_id);
              }
            });
          }

          var modal_height = $(modal_id).outerHeight();
          var modal_width = $(modal_id).outerWidth();

          $('#lean-overlay').css({'display': 'block', opacity: 0});

          $('#lean-overlay').fadeTo(200, o.overlay);

          $(modal_id).css({
            'display': 'block',
            'position': 'fixed',
            'opacity': 0,
            'z-index': 11000,
            'left': 50 + '%',
            'margin-left': -(modal_width / 2) + 'px',
            'top': o.top + 'px'
          });

          $(modal_id).fadeTo(200,1);

          e.preventDefault();
        });
      });
    }
  });
})(jQuery);