Bootstrap 尽管未设置高度，但 3 模态打开的高度受限？

Question

我有一个 "Check Availability" 按钮可以打开此页面上的 Bootstrap 3 模式： http://www.cairnsmorecottages.co.uk/tackroom-cottage-newton-stewart.php

打开正确。

我在下一页上有完全相同的按钮，唯一的区别是它的标题是 "Tackroom Cottage"，但这次它以受限的高度打开。是什么赋予了？ http://www.cairnsmorecottages.co.uk/contact.php

唯一的区别是我在联系人页面上有两个模式，但为什么会限制第二个引用模式的高度？

难道不可能在一个页面上有两个 Bootstrap 3 模态框吗？谢谢你。新泽西

Answer 1

你的问题是包含可用性日历的两个框架具有相同的 ID，因此当 resizeCrossDomainIframe 函数触发时它正在获取第一个 iframe（已关闭），计算它的高度（这将是0 或 null，老实说，我没有仔细研究它）然后使用该计算来调整 iframe 的高度。

对于绝对最少的代码更改，您只需执行以下操作即可。

将第一个 iframe 更改为此

<iframe width="100%" id="myFrame1" src="http://www.countrycottagesonline.com/project/site/calendar_new.php?cid=1123" frameborder="0" scrolling="no" onload="resizeCrossDomainIframe('myFrame1','http://www.countrycottagesonline.com');"></iframe>

请注意，id 已更改为 myFrame1（我可能会将其更改为更有意义的内容，例如 stableCottageCalanderFrame），这已反映在内联 onload 脚本中 onload="resizeCrossDomainIframe('myFrame1','http://www.countrycottagesonline.com');"

然后对另一个做同样的事情

<iframe width="100%" id="myFrame2" src="http://www.countrycottagesonline.com/project/site/calendar_new.php?cid=3329" frameborder="0" scrolling="no" onload="resizeCrossDomainIframe('myFrame2','http://www.countrycottagesonline.com');"></iframe>

同样，也许将该 ID 更改为 tackroomCalendarFrame。

您还应该知道您的页面中有两个相同的功能。您的 resizeCrossDomainIframe 函数无缘无故地在两个单独的脚本标记中出现了两次（我猜这里使用了一些复制意大利面）。避免未来的头痛并摆脱其中之一。当您使用它时，您可以将其向下移动到页面底部（就在结束 </head> 标记之前），以帮助提高页面加载速度并通常使事情更有条理。最好的做法是尽可能将脚本放在页面底部，尽管在这种情况下没有任何区别。

这里还有一个固定的 Bootply 给你 - http://www.bootply.com/xRbZP13GXD

Bootstrap 尽管未设置高度，但 3 模态打开的高度受限？

Bootstrap 3 modal opening with a restricted height despite not height being set?

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3