个人中心
gpt4 book ai didi

css - 更改 Fancybox iframe css 内联

转载 作者：行者123 更新时间：2023-11-28 13:29:53 25 4
gpt4 key购买 nike

我有几种情况需要更改内联 Fancybox iframe 的 css，但我一直无法弄清楚该怎么做。

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

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

我尝试过的其他方法:

  1. 分配类(class)
  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);

最佳答案

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

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

关于css - 更改 Fancybox iframe css 内联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13690817/

25 4 0
文章推荐： javascript - 将数组十六进制颜色转换为数组 RGB 颜色
文章推荐： jquery - 带有子菜单对象的菜单框中的图像
文章推荐： javascript - Simple++ 不增加数字
文章推荐： ios - Xcode Storyboard在添加 segue 后调整 Controller 场景的大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com