Question

我有一个＆＃34;检查可用性＆＃34;按钮，在此页面上打开Bootstrap 3模式： http://www.cairnsmorecottages.co.uk/tackroom-cottage-newton-stewart.php

这会正确打开。

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

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

是不是可能在一个页面上有两个Bootstrap 3模态？谢谢。 NJ

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脚本{{1 }}

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

onload="resizeCrossDomainIframe('myFrame1','http://www.countrycottagesonline.com');"

同样，可能会将该ID更改为<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>。

您还应该知道页面中有两个相同的功能。您的tackroomCalendarFrame函数在两个单独的脚本标记中出现两次没有充分的理由（我猜这里使用了一些复制面食）。拯救未来的头痛并摆脱其中一个。当你在它的时候，你可以将它移到页面的底部（就在关闭resizeCrossDomainIframe标签之前），以帮助提高页面加载速度，并保持更有条理。最好的做法是尽可能将脚本放在页面底部，尽管在这种情况下它没有任何区别。

这里也是一个固定的Bootply - http://www.bootply.com/xRbZP13GXD

尽管没有设置高度，Bootstrap 3模态开口的高度有限吗？

1 个答案: