let activeModal = '';


function changeModal(id) {
  $('#fullScreenShadow').scrollTop(0);
  $('#modalClone').empty();
  $('#' + id).children().clone(true).appendTo('#modalClone');
  activeModal = id;
}
function showModal(id) {
  $('#' + id).children().clone(true).appendTo('#modalClone');
  $('#fullScreenShadow').show();
  $('html, body').css('overflow', 'hidden');
  activeModal = id;
}
function closeModal() {
  $('#fullScreenShadow').scrollTop(0).hide();
  $('#modalClone').empty();
  $('html, body').css('overflow', '');
  activeModal = '';
}

$(function() {
  $('.modal').hide();

  $('body').append($('<div>').prop('id', 'fullScreenShadow').css({'display': 'none', 'position': 'fixed', 'top': 0, 'left': 0, 'right': 0, 'bottom': 0, background: 'rgba(0, 0, 0, 0.7)', overflow: 'hidden', overflowY: 'auto', boxSizing: 'border-box', 'zIndex': 100}));
  $('#fullScreenShadow').append($('<div>').prop('id', 'modalWrapper').css({display: 'table', width: '100%', height: '100%'}));
  $('#modalWrapper').append($('<div>').prop('id', 'modalOuter').css({display: 'table-cell', verticalAlign: 'middle', padding: '20px 0', textAlign: 'center'}));
  $('#modalOuter').append($('<div>').prop('id', 'modalClone').addClass('modal').css({margin: '0 auto', maxWidth: '980px', display: 'inline-block'}));

  $('body').css('zIndex', 0);
});