Skip to content

Instantly share code, notes, and snippets.

@fosron
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fosron/cf2ec4204ad212ccd3fc to your computer and use it in GitHub Desktop.
Save fosron/cf2ec4204ad212ccd3fc to your computer and use it in GitHub Desktop.
Simple jQuery Modal Window
.ModalOverlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.29);
z-index: 1000;
overflow: hidden;
}
.ModalOverlay .Modal {
width: 80%;
height: 80%;
left: 50%;
top: 50%;
margin-left: -40%;
margin-top: -550px;
background: #fff;
position: absolute;
color: #000;
}
body.ModalOn {
overflow: hidden;
position: absolute;
}
/**
* RSSJqM - ReallySimplyStupidJqueryModal v1.0
*
* Some sort of documentation:
* HTML : <a href="#" class="Modal">Open Modal</a>
* Open programatically : jQuery('body').trigger('openModalOverlay');
* Close programatically : jQuery('body').trigger('closeModalOverlay');
* If you want to pass some data read docs @ https://api.jquery.com/trigger/
**/
var initModal = function initModal(){
jQuery('body').on('closeModalOverlay', function(){
jQuery('.ModalOverlay').remove();
jQuery('body').removeClass('ModalOn');
});
jQuery('body').on('openModalOverlay', function(e){
var modal = jQuery('' +
'<div class="ModalOverlay">' +
'<div class="Modal">' +
'<a href="#" class="closeModalOverlay">X</a>' +
'<div class="ModalContent">' +
'Some content' +
'</div>' +
'</div>' +
'</div>');
jQuery('body').addClass('ModalOn').prepend(modal);
});
jQuery('body').on('click', '.ModalOverlay, .closeModalOverlay', function(e){
e.preventDefault();
jQuery('body').trigger('closeModalOverlay');
return false;
});
};
jQuery(function(){
initModal();
jQuery("body").on("click", 'a.Modal', function(e){
e.preventDefault();
jQuery('body').trigger('openModalOverlay');
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment