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>

因此，如果我没有标题和正文标签，则会弹出文档，但它没有样式。如果我有一个带有 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 回答