Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
found the root javascript somewhere, not sure...but I've modified it a lot...
<div id="some_id" class="window">
<!-- Some Html here... -->
<a href="#" class="close">Cancel</a>
</div>
<div id="mask"></div>
$(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
display_mask( $(this).attr('href') );
});
//if close button is clicked
$(document).on('click','.light_window .close, .window .close', function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.light_window, .window').hide();
$(window).off('resize');
});
});
function display_mask(id, is_mask_enabled) {
if(is_mask_enabled) {
enable_mask_click();
} else {
disable_mask_click();
}
reposition_window(id);
move_on_resize(id);
//transition effect
var $mask = $('#mask');
$mask.fadeIn(1000);
$mask.fadeTo("slow",0.6);
$(id).fadeIn(500);
}
function reposition_window(id) {
var $win = $(window), $doc = $(document), $id = $(id);
var winH = $win.height(), winW = $win.width();
var id_top_pad = 50, id_left_pad = 10;
var idH = $(id).height(), idW = $(id).width();
var id_top = winH/2-idH/2, id_left = winW/2-idW/2;
var position = 'fixed';
if(id_top <= id_top_pad) id_top = id_top_pad;
if(id_left <= id_left_pad) id_left = id_left_pad;
if((id_top === id_top_pad && idH > winH) || (id_left === id_left_pad && idW > winW)) position = 'absolute';
$id.css('top', id_top);
$id.css('left', id_left);
$id.css('position', position);
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width': $doc.width(),'height':$doc.height()});
}
function move_on_resize(id) {
$(window).on('resize', function() {
reposition_window(id);
});
}
function disable_mask_click() {
$(document).off('click', '#mask');
}
function enable_mask_click() {
//$(document).off('click', '#mask');
$(document).on('click', '#mask', function () {
$(this).hide();
$('.window, .light_window').hide();
$(window).off('resize');
});
}
.window
display: none
position: fixed
z-index: 1001
background-color: #333
border: 5px solid #fff
padding: 30px
width: 550px
color: #fff
-webkit-border-radius: 10px
-moz-border-radius: 10px
border-radius: 10px
-webkit-box-shadow: 0px 0px 5px 0px #000
-moz-box-shadow: 0px 0px 5px 0px #000
box-shadow: 0px 0px 5px 0px #000
.window a
color: #0CF
#mask
background-color: #000
position: absolute
top: 0
left: 0
z-index: 1000
opacity: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.