Question

我正在使用fancybox iframe来显示HTML文件。主页有一个用于启动iframe的按钮。 iframe有一个红色背景（在css中我改变了.fancybox-skin到background：＃f00;）。感谢advice of Travis J，我现在还有一个fancybox弹出图像，当移动设备以纵向模式加载主页时启动该图像，并建议在横向上更好地查看该网站。弹出图像是PNG ...具有透明度。这是PNG：http://www.casedasole.it/testing/popup.png

问题所在。请以横向模式打开此页面：http://www.casedasole.it/testing/popup3.html，然后单击“启动iframe”按钮。好红色背景。然后调整为纵向（只需将桌面浏览器挤入垂直方向）并重新加载，并且有“透明”PNG - 与iframe具有相同的＃f00背景。

为了使PNG背景真正透明，我可以制作fancybox-skin的背景：透明，但iframe也采用透明背景：http://www.casedasole.it/testing/popup4.html

代码是：

var isPortrait = window.innerWidth < window.innerHeight;
if( isPortrait )
{
 $.fancybox.open([
   {
    href : 'popup.png'
   }
  ], {
   padding : 0
   }
 );
}

我如何说服fancybox为popup.png制作一个例外并给它一个透明的背景？

从这里开始是30小时后。以我自己登录，没有“你的答案”文本框，也没有“Answer your own question”复选框的痕迹。所以......

GOT IT！ 经过一番摆弄，找到了解决方案。在css中，我将花式皮肤背景保持透明，因此弹出图像具有透明背景。然后，根据我找到here的答案，我将启动按钮的设置更改为：

$(document).ready(function () {
$('.fancybox').fancybox({
 modal : true,
 maxWidth : 800,
 maxHeight : 420,
 autoSize : true,
 autoWidth: true,
 autoHeight: true,
 fitToView: true,
 padding : 0,
 margin : 0,
 showCloseButton : true,
 scrolling : 'no',
 beforeShow : function() {
         $('.fancybox-skin').css({'background' :'#f00'});
    },
 afterShow : function () {
 $('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');
 }
 });});

这样，iframe获得了红色背景。这是：www.casedasole.it/testing/popup6.html。我希望未来的一些访客能发现这一切有用。

Fancybox - 自定义onload弹出图像的背景颜色

0 个答案: