2

ページロード時に開く Fancybox があります。ポップアップボックスのスタイルを設定できないことを除いて、すべてが正常に機能しています。私のcssを拾わないようです。ところで; 私はjsに慣れていません-チュートリアルからコピーしただけです! したがって、答えにjsが含まれている場合は、非常に具体的にしてください。ありがとうございました！

頭の中：

    <link rel="stylesheet" type="text/css" href="/js/jquery.fancybox/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" href="/stylesheets/ups-screen.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script>


<body onload="$(a'#popup').trigger('click');">

bodyタグを閉じる直前：

    <script type="text/javascript">
$(document).ready(function() {
    $("#popup").fancybox().trigger('click');

});

ロードするコンテンツ:

<a id="popup" href="#melding"></a>
<div style="display: none;">
<div class="fancybox">
<div id="melding"><br />
<br />
<h3>Velkommen til min nye hjemmeside.</h3>
<br />
<p>Testing - Testing. </p>
</div>
</div>
</div>

ups-screen スタイルシートの css:

.fancybox {
width: 600px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
padding-top: 30px;
 }

#melding{ 
text-decoration:none;
}
#popup{
background-color:#444;
}

私が何をしようとしても、パディングなしで同じサイズの正方形を返します。

4

2 に答える 2

3

これを試して： 

$(document).ready(function() {
    $("#popup").fancybox({
        'padding' : 30,
        'width' : 600,
    }).trigger('click');
});

いくつかの例を次に示します: http://fancybox.net/blog

編集： iframeがfancyboxにロードされている場合、上記のソリューションは機能しています。あなたの場合、#melding の幅とパディングを設定する必要があります。

#melding{ 
   text-decoration:none;
   width: 600px;
   padding: 30px 30px 20px 30px;

}
于 2012-10-23T14:36:37.097 に答える
0 
...except I'm not able to style the pop-up box. 
It seem like it will not pick up my css.

inlineさて、fancybox がコンテンツ ( <div>fancybox に表示したい非表示) でどのように機能するかを知る必要があります。

id="melding"まず、次のhtml を使用してコンテナーをターゲットにしています。

<a id="popup" href="#melding"></a>

ファンシーボックスを開くと、ドキュメント内の元の位置からファンシーボックスに移動され<div id="melding">...</div>ます。代わりに一時的なプレースホルダーが残されるため、fancybox を閉じたときにコンテンツを元の場所に戻すことができます。

... これは、fancybox を開く前inlineの ( ) コンテンツの外観です。

<div style="display: none;">
 <div class="fancybox">
  <div id="melding"><br />
   <br />
   <h3>Velkommen til min nye hjemmeside.</h3>
   <br />
   <p>Testing - Testing. </p>
  </div>
 </div>
</div>

....ファンシーボックスを開いた後の様子(v2.1.2)

<div style="display: none;">
 <div class="fancybox">
  <div class="fancybox-placeholder" style="display: none; "></div>
 </div>
</div>

....もちろん<div id="melding">...</div>fancyboxの中にあります。

あなたへの質問: 問題が見えますか? 回答：スタイルをセレクターに適用しています.fancybox

.fancybox {
  width: 600px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 30px;
}

...しかし、そのセレクターはfancyboxにならないため、スタイルを設定できないのはこのためです。

あなたのオプション:

1つ： @bbosternak#meldingによって適切に指摘されたスタイルを設定します

...また

2：次のようにhtml構造を変更します

<div id="melding" style="display: none;">
 <div class="fancybox">
  <h3>Velkommen til min nye hjemmeside.</h3><br />
  <p>Testing - Testing. </p>
 </div>
</div>

id="melding"を の親<div>に移動したことに注意してください<div class="fancybox">

于 2012-10-24T01:12:53.407 に答える