Bootstrap/JQuery Responsive/Centered Modal w/Google Docs IFRAME

После нескольких дней пробных вариаций я, наконец, заработал все параметры размеров, используя настройки по умолчанию для IFRAME для расчета настроек по умолчанию для всего остального, вплоть до размера экрана. Затем я использовал это соотношение для сравнения с реальным размером экрана и обратил весь процесс, чтобы построить фактические значения ширины и высоты.

Эта новая версия отлично работает, пока не будет применено вертикальное центрирование к модальному модулю, когда его размеры определяются шириной. Вот обновленный JSFiddle: http://jsfiddle.net/gu8dqdco/1/

Все изменения размера работают отлично, если я не вычисляю верхнее поле в операторе ELSE:

if((windowX / windowY) > (defaultScreenWidth / defaultScreenHeight))
{
 modalY = windowY - (outerModalPadding * 2);
 modalX = (modalY * defaultModalWidth) / defaultModalHeight;
 modalMarginTop = outerModalPadding;
 modalMarginLeft = (windowX - modalX) / 2;
}
else
{
 modalX = windowX - (outerModalPadding * 2);
 modalY = (modalX * defaultModalHeight) / defaultModalWidth;
 modalMarginTop = (windowY - modalY) / 2;
 modalMarginLeft = outerModalPadding;
}

Дело не в том, что он не центрирует содержимое, а в том, что содержимое сжимается, когда ширина регулируется как управляющий фактор во всех размерах.

На данный момент у меня нет идей. Любая помощь будет принята с благодарностью.

Оригинал:

Итак, вкратце: я написал функцию, которая будет центрировать модальное окно и сохранять отзывчивость, добавляя отзывчивость к IFRAME внутри тела модального окна. Я попытался сделать его универсальным для IFRAME, добавив при этом функциональность для удаления (скрытия) .controlbar средства просмотра документов Google. Вот JSFiddle: http://jsfiddle.net/g2n8cnnm/2/

Вот функция:

 function resizeModal() {
  $(this).css('display', 'block');
  var windowX = $(window).width();
  var windowY = $(window).height();
  var modal = $(this).find('.modal-dialog');
  var header = $(this).find('.modal-header');
  var headerY = header.height() + parseInt(header.css('padding-top')) + parseInt(header.css('padding-bottom')) + parseInt(header.css('border-top')) + parseInt(header.css('border-bottom'));
  var content = $(this).find('iframe');
  var contentX = parseInt(content.css('width'));
  var contentY = parseInt(content.css('height'));
  var body = $(this).find('.modal-body');
  var bodyPX = parseInt(body.css('padding-left')) + parseInt(body.css('padding-right'));
  var bodyPY = parseInt(body.css('padding-top')) + parseInt(body.css('padding-bottom'));
  if(((windowX) / (windowY)) > (contentX / contentY)) {
   var bodyY = windowY - headerY - bodyPX;
   var bodyX = (bodyY * contentX) / contentY;
  } else {
   var bodyX = windowX - bodyPY;
   var bodyY = (bodyX * contentY) / contentX;
  }
  var contentX = bodyX;
  var contentY = bodyY;
  var centerX = (windowX - bodyX) / 2;
  var centerY = (windowY - headerY - bodyY) / 2;
  modal.css('width', bodyX);
  body.css('width', bodyX);
  body.css('height', bodyY);
  content.css('width', contentX);
  content.css('height', contentY);
  var centerX = (windowX - bodyX) / 2;
  var centerY = (windowY - headerY - bodyY) / 2;
  modal.css('margin-top', centerY);
  modal.css('margin-left', centerX);
 }

Итак, у меня есть две проблемы. Во-первых, ширина .modal-body на 30 пикселей меньше. Я исправил это, сделав «var contentX = bodyX - bodyPX;», но это вызывает проблемы с изменением размера, когда с каждым изменением размера он становится все меньше и меньше. Любые идеи о том, как я могу исправить ширину содержимого, не меняя тело и не вызывая этого постоянного сжатия?

Вторая проблема связана с соотношением и его переключением с определения размера по высоте на определение размера по ширине. Если работает отлично, в точку. Изменение размера с представления строки на представление столбца приводит к сбоям и переключению на изменение размера по ширине слишком рано, заставляя верхнюю и нижнюю часть модального окна отображаться за пределами экрана. Я знаю, что соотношение windowX/windowY не является идеальным соотношением для работы, но поскольку размер модального окна, которое, как я считаю, является идеальным соотношением, устанавливается путем вычислений, выполняемых во время оператора IF, я не совсем уверен в этом. как я могу это исправить.

Любые идеи или помощь будут очень признательны, и я извиняюсь за беспорядочный код.