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 のサイズを変更せずに 1 か所でそれをオーバーライドする方法がない限り)表示されます）

このスクリプトは別の投稿で見つけましたが、コードに挿入する正しい方法を見つけられればうまくいくはずです。

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

1 に答える 1

0

2 つの 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 に答える