Skip to content

Instantly share code, notes, and snippets.

@michalvalasek
Created November 15, 2012 14:24
Show Gist options
  • Save michalvalasek/4078847 to your computer and use it in GitHub Desktop.
Save michalvalasek/4078847 to your computer and use it in GitHub Desktop.
Minimal modal window using jQuery
$(function() {
/* Modal window script in 9 lines */
function mw_load(html) {
mw_mask = 'background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;';
mw_win = 'background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 23%;width: 33%;z-index: 1001;';
$('head').append('<style id="mw_style">#mw_mask{'+mw_mask+'}#mw_win{'+mw_win+'}</style>');
$('body').append('<div id="mw_mask"></div><div id="mw_win">'+html+'</div>');
$('#mw_mask,.mw_close').unbind('click').bind('click', function() {mw_close();});
}
function mw_close() {
$('#mw_win,#mw_mask,#mw_style').remove();
}
mw_load('<p>HTML content to be shown in the window.</p>');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment