0

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

4 回答 4

1

这种方法对我有用：topRatio: '0'

$(".fancybox").fancybox({
    topRatio: '0'
});
于 2014-02-24T14:09:20.783 回答
0

因为第一次打开fancybox不知道页面的尺寸，width所以height设置为0. 随后，对象尺寸已被缓存，因此 fancybox 可以正确呈现内容。

来自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
});
于 2012-06-12T21:10:37.457 回答
0

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

于 2012-06-13T15:59:01.330 回答
0

在我的 fancybox iframe 页面的底部，

我放置以下代码。

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

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

于 2013-07-08T09:08:00.967 回答