Question

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>

Answer 1

此方法适用于我：topRatio: '0'

$(".fancybox").fancybox({
    topRatio: '0'
});

Answer 2

这是因为fancybox在第一次打开时不知道页面的尺寸，width和height未知，因此设置为0。随后的时间，对象维度已经被缓存，因此fancybox可以正确呈现内容。

From fancybox website：

autoSize：如果设置为true（默认），则对于“内联”，“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
});

Answer 3

您的ajax响应包含图像，fancyBox不会预加载它们。因此，如果您第二次打开，则浏览器已缓存该图像，fancyBox正确计算高度。

Answer 4

在我的fancybox iframe页面的底部，

我放置以下代码。

$('#wrapper').height($('#wrapper').height());

我必须在某些情况下这样做，因为动态内容没有设置高度，因为响应式布局。

FancyBox V2 - Stuck加载错误的大小但是当我存在并再次点击花式框时它会加载正确的大小？

4 个答案: