How do you show a custom Modal with JQuery only with no html (other than the button)?

Question

I am using bootstrap so I can't use JQuery UI anymore. This code gets reused a lot and I can't figure out how to make a Modal with JQuery only (No html other than the button itself). Can you customize and create one only with JQuery outside of HTML?

$(".trigger").on('click',function(e) {
    $('#integrate_employee_popup').show('block');// used to be .trigger()
  return false;
});

$("#integrate_employee_popup").bind('block',function(e) {
   $(this).show();
/* old code was a blockui */
});

For reference here is the old JQuery UI code:

/*
$.blockUI({
  message: $('#integrate_employee_popup'),
  css: {
    top: '2%',
    left: ($(window).width() - 650) /2 + 'px',
    width: '650px',
    border: "none",
    cursor: "default"
  }
});*/

I tried to make a modal but it doesn't work:

http://www.bootply.com/1d3OLr29xF

  var window_width = $(window).width();  
  var window_height = $(window).height();  

$('.modal_window').each(function(){  

//get the height and width of the modal  
  var modal_height = $(this).outerHeight();  
  var modal_width = $(this).outerWidth();  

//calculate top and left offset needed for centering  
  var top = (window_height-modal_height)/2;  
  var left = (window_width-modal_width)/2;  

//apply new top and left css values  
  $(this).css({'top' : top , 'left' : left});  

});  

<a href="#" class="btn btn-danger modal_window" role="button" id="">Test Button</a>