Question

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

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

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

我尝试过的其他方法：

分配课程
在javascript中设置css - $（this）.css（{...}）
在脚本中设置iframes css - $（“＃customer_info”）。css（{...}）;
将一个类添加到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);

Answer 1

您必须更新两个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高度更新为内容的高度。

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

更改Fancybox2 iframe css内联

1 个答案: