Skip to content

Instantly share code, notes, and snippets.

@ctalkington
Created November 17, 2012 07:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save ctalkington/4093995 to your computer and use it in GitHub Desktop.
Save ctalkington/4093995 to your computer and use it in GitHub Desktop.
leanModal with escape and more
(function($){
$.fn.extend({
leanModal: function(options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null,
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) {
var modal_id = $(this).attr('href');
if (o.closeButton) {
$(o.closeButton).one('click', function() {
close_modal(modal_id);
});
}
if (o.clickClose) {
$('#lean-overlay').one('click', function() {
close_modal(modal_id);
});
}
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment