0

我有几种情况需要更改 Fancybox iframe 内联的 css，但我无法弄清楚如何做到这一点。

编辑 - 部分成功 更改函数内的选项会更改 iframe 的高度、宽度和填充，但是 wrapCSS 无法使用，因此我无法调整字体颜色或大小。我也无法将它与下面列出的其他方法结合使用。

parent.$.fancybox({
content: "Thank you for creating an account",
         type : 'iframe',
 padding : 50,
         width: 50,
         height:50,   
});

我尝试过的其他方法：

  1. 分配班级
  2. 在 javascript 中设置 css - $(this).css({...})
  3. 在脚本中设置 iframe css - $("#customer_info").css({...});
  4. 添加一个类到fancybox-wrap - $('.fancybox-wrap').addClass('thank_you');

方法 #3（在脚本中设置 iframe 的 css）成功更改 iframe 内容的 css，但不会更改 iframe 容器的 css。

我需要这样做的一个例子是，当客户提交表单并且显示的成功消息需要不同的布局（最重要的是 iframe 的高度和宽度）时。

success: function () {                           
   $("#customer_info").fadeOut("fast", function(){
   $(this).before("Thank you for creating an account");
   setTimeout("$.fancybox.close()", 1000);
   });                         
}

我正在使用 Fancybox2，其他布局问题需要我设置此内联，而不是允许 iframe 调整大小以适应内容（除非有一种方法可以仅在一个地方覆盖它而不为任何其他内容调整 iframe 的大小显示）

我在另一篇文章中遇到了这个脚本，如果我能找出将它插入我的代码的正确方法，我相信它应该可以工作。

$('.fancybox-inner').height($(this).contents().find('body').height()+30);
4

1 回答 1

0

您必须更新两个 css 类。.fancybox-inner 调整内容大小， .fancybox-skin 调整皮肤大小。

$('.fancybox-iframe').contents().find('body').replaceWith('<body>Thank you</body>')
$('.fancybox-inner').css('width', 200);
$('.fancybox-skin').css('width', 200);

你也可以使用

$.fancybox.update()

但这只会将 FancyBox 高度更新为内容的高度。

您最好和最干净的选择就是打开一个带有感谢信息的新花式框。

于 2012-12-03T23:14:28.937 回答