更改Fancybox2 iframe css内联

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

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

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

其他方法我试过：

将类分配
设置在JavaScript的CSS - $（本）的.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);

来源

2012-12-03 Chaya Cooper

您必须更新两个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与谢谢你的消息。

来源

2012-12-03 23:14:28 Claus

我无法使任何一种方法工作:-(你介意让我看哪里插入它？ –

你试过打开一个新的fancybox？如上所述，这将是首选。该代码从主文档，如果你在fancybox中执行它，那么你需要添加top。$（...）才能获得正确的jQuery上下文。 – Claus

我已经采取了你的建议，并希望打开一个新的iframe（只要没有明显的延迟）:-)我有一些麻烦，搞清楚如何做到这一点，因为这个脚本是在iframe页面上，而不是调用iframe的父级。你会知道该怎么做吗？我试过的每个方法都在打开新的iframe之前终止脚本，因为运行脚本的iframe已关闭。 –

更改Fancybox2 iframe css内联

回答

相关问题