带有 Google Docs IFRAME 的 Bootstrap/JQuery 响应式/居中模式

Posted 2023-05-09

【中文标题】带有 Google Docs IFRAME 的 Bootstrap/JQuery 响应式/居中模式

【英文标题】：Bootstrap/JQuery Responsive/Centered Modal w/ Google Docs IFRAME

【发布时间】：2014-10-16 13:29:15

【问题描述】：

经过几天的反复尝试，我终于让所有的尺寸参数都能正常工作，使用 IFRAME 的默认设置来计算其他所有内容的默认设置，直到屏幕尺寸。然后我使用这个比率来测试实际的屏幕尺寸，并反转整个过程来构建实际的宽度和高度。

这个新版本效果很好，直到在模态框的大小由宽度决定时应用垂直居中。这是更新后的 JSFiddle：http://jsfiddle.net/gu8dqdco/1/

如果我不在 ELSE 语句中计算 margin-top，所有的调整大小都可以正常工作：

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 保持通用，同时添加删除（隐藏）Google Docs Viewer 的 .controlbar 的功能。这是 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 的宽度太小了 30px。我已经通过制作“var contentX = bodyX - bodyPX;”解决了这个问题，但它会导致调整大小出现问题，每次调整大小都会变得越来越小。关于如何在不改变正文并导致这种不断缩小的情况下固定内容宽度的任何想法？

第二个问题是关于比率及其从调整高度到调整宽度的转换。如果效果很好，一定程度上。从行视图调整为列视图，它会出现故障并过早切换到按宽度调整大小，从而迫使模态的顶部和底部出现在屏幕外。我知道 windowX / windowY 比率不是使用的理想比率，但由于模态的大小（我认为是理想比率）是由 IF 语句期间完成的计算设置的，我不完全确定我该如何解决这个问题。

任何想法或帮助将不胜感激，对于混乱的代码，我深表歉意。

【参考方案1】：

我相信我终于找到了解决方案，尽管这不是我所希望的。

原来问题出在outerModalPadding 变量的定义上。以前，我将它设置为从 CSS 中提取值，效果很好，直到页面宽度低于 768px。我试图简单地删除定义此值的 CSS 上的分辨率约束，但这没有任何区别。

最后，我只是在jQuery中定义了固定值。

这是工作函数：

$(document).ready(function() 
 $('iframe').each(function() 
  if($(this).hasClass('google')) 
   $(this).wrap('<div class="googleDIV"></div>');
  
 );
 function resizeModal() 
  $(this).css('display', 'block');
  var modal = $(this).find('.modal-dialog');
  var header = $(this).find('.modal-header');
  var content = $(this).find('iframe');
  var modalBody = $(this).find('.modal-body');

  var outerModalPadding = 10;
  var innerModalPadding = 15;
  var defaultContentWidth = 600;
  var defaultContentHeight = 768;
  var googleControlbarHeight = 37;
  var defaultBodyWidth = defaultContentWidth + (innerModalPadding * 2)
  var defaultBodyHeight = defaultContentHeight - googleControlbarHeight + (innerModalPadding * 2);
  var headerY = header.height() + (innerModalPadding * 2) + parseInt(header.css('border-top')) + parseInt(header.css('border-bottom'));
  var defaultModalWidth = defaultBodyWidth;
  var defaultModalHeight = headerY + defaultBodyHeight;
  var defaultScreenWidth = defaultModalWidth + (outerModalPadding * 2);
  var defaultScreenHeight = defaultModalHeight + (outerModalPadding * 2);

  var windowX = $(window).width();
  var windowY = $(window).height();
  var bodyPX = parseInt(modalBody.css('padding-left')) + parseInt(modalBody.css('padding-right'));
  var bodyPY = parseInt(modalBody.css('padding-top')) + parseInt(modalBody.css('padding-bottom'));

  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;
  
  bodyY = modalY - headerY;
  bodyX = modalX;
  contentY = bodyY + googleControlbarHeight - (innerModalPadding * 2);
  contentX = bodyX - (innerModalPadding * 2);

  content.css(width: contentX, height: contentY);
  modalBody.css(width: bodyX, height: bodyY);
  modal.css(width: modalX, height: modalY, 'margin-top': modalMarginTop, 'margin-left': modalMarginLeft);
 
 $('.modal').on('show.bs.modal', resizeModal);
 $(window).resize(function resize() 
  $('.modal:visible').each(resizeModal);
 );
);

可以在以下地址找到它：http://jsfiddle.net/gu8dqdco/3/

如果我发现自己有这样做的冲动，我会对其进行修改，以便可以选择移除 Google 控制栏，可能通过另一个课程，但那是另一天的事了。