FancyBox V2 -卡住加载错误的大小，但当我存在并再次单击花哨的框时，它加载了正确的大小？
FancyBox V2 -卡住加载错误的大小，但当我存在并再次单击花哨的框时，它加载了正确的大小？
提问于 2012-06-13 04:29:12
FancyBox V2 -我被卡住了，当我点击第一个fancybox链接时，框加载的大小不正确，但当我存在并再次单击花哨的框时，它加载了正确的大小？？
它之前的自动调整是正确的，因为我在网站上有多个fancybox，但当我打开这个fancybox进行购买时，它在第一次点击时自动调整不正确，然后在第二次点击时正确
我该怎么解决这个问题？？
(显然，我已经用化妆信息替换了真实的PayPal信息)
代码如下：
主页：-
<!DOCTYPE html>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="./source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="./source/jquery.fancybox.css" media="screen" />
<script>
$(document).ready(function() {
$(".fancybox1").fancybox();
}); // ready
</script>
</head>
<body>
<a href="Fancybox.html" class="fancybox1 fancybox.ajax">Buy</a>
</body>
</html>Fancybox页面：
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr/" method="post" onsubmit="return">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="BuyAshirt@gmail.com">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="item_name" value="Great Shirt">
<input type="hidden" name="amount" value="10.00">
<table>
<td>
<input type="hidden" name="on1" value="Name On Top">Name You Want On Top</td>
<td>
<input id="Top_name" nametype="text" name="os1" maxlength="200"></td>
</td>
<td>
<tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_xpressCheckout.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input name= "agree" type="checkbox" id="CHKBOX_1" value="Accept Terms of Service"><span onClick="document._xclick.CHKBOX_1.checked=(! document._xclick.CHKBOX_1.checked);">I accept <a href="NotImportant.html" class="fancybox1 fancybox.ajax">terms</a></span> of service
</form>回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-13 05:10:37
这是因为fancybox在第一次打开时不知道页面的大小，width和height是未知的，所以设置为0。随后，对象维度已经被缓存，因此fancybox可以正确地呈现内容。
autoSize：如果设置为true (默认值)，则自动确定'inline‘、'ajax’和'html‘类型的内容宽度/高度。如果未设置维度，则可能会产生意外结果
在Fancybox.html页面中设置维度可能是个好主意，比如在<table>或<form>标记中设置维度
<table style="width: 620px; height: 320px;"> - or - <form style="width: 620px; height: 320px; display: block;">最终，您可能更喜欢在脚本中设置此特定表单的尺寸
$(".fancybox1").fancybox({
fitToView: false,
width: 620,
height: 320
});Stack Overflow用户
发布于 2014-02-24 22:09:21
这个方法适用于我：topRatio: '0'
$(".fancybox").fancybox({
topRatio: '0'
});Stack Overflow用户
发布于 2012-06-13 23:59:01
您的ajax响应包含一个图像，并且fancyBox不会预先加载它们。因此，如果你再次打开浏览器，那么浏览器已经缓存了该图像，并且fancyBox正确地计算出了高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11004355
复制相关文章
相似问题
腾讯云开发者
