found the root javascript somewhere, not sure...but I've modified it a lot...

modal_window.html

<div id="some_id" class="window">
    <!-- Some Html here... -->
    <a href="#" class="close">Cancel</a>
</div>

<div id="mask"></div>

modal_window.js

$(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');
  });
}

style.sass

.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