0

特定のリンクがクリックされたときに、カラーボックスを使用して別のローカル ドキュメントを表示しています。問題と私はこれまでこれをやったことがないので、明らかかもしれません.CSSでスタイルを設定するためにポップアップするページを取得できません. これがどのように機能するのかわかりません。ポップアップするページは、それを呼び出したページの CSS でスタイル設定されますか? ポップアップ ドキュメントにヘッダー タグまたはボディ タグを付けることができない、または必要ないと思っていました。また、iframeを使用せずにこれを行いたいと思います。

これは私のhtmlからの選択です:

<li class="event priority1">
  <a href="detail_img.html" class="cbox-popup">
    <div class="content">Lorem Ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="lower">
      <hr>
      <span class="date">03.13.2012</span>
      <span class="type">Regulation</span>
      <img src="img/icon-lg-financial.png" alt="" height="19" width="26" />
    </div>
  </a>
</li>

ロードするドキュメントは次のとおりです。

<div class="popup wrap">
  <div id="content">
    <header>
      <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
      <div class="info">
        <time datetime="">05.10.2012</time>
        <h2>Legislation</h2>
        <img src="img/icon-popup-health.png" alt="" width="20" height="18" />
      </div>
    </header>
    <div class="inner">
      <img src="img/popup_img-fullSizeplaceholder.gif" alt="" width="765" height="491" />
    </div>
  </div>
</div>

最後に、私が使用しているjavasriptは次のとおりです。

    <script>
    jQuery(function() {
      jQuery('.cbox-popup').colorbox({maxWidth: '75%'});    
    });
    </script>

したがって、header タグと body タグがない場合、ドキュメントはポップアップしますが、スタイルが設定されていません。HTMLヘッダーとボディタグを含む完全なドキュメントがある場合、何も表示されません。

4

1 に答える 1

0

繰り返しますが、例のページに見られるように; inline を true に設定し、アンカーにリンクする必要があります。

<script>
jQuery(function() {
  jQuery('.cbox-popup').colorbox({
    maxWidth: '75%',
    inline: true
  });
});
</script>

リンクはアンカーを指す必要があります:

<a href="#stuff-to-be-shown" class="cbox-popup">

次に、表示するすべてを次のようにラップします。

<div style='display:none'>
  <div id='stuff-to-be-shown'>
    Blah blah
  </div>
</div>
于 2012-08-10T14:50:43.137 に答える