Question

当点击某个链接时，我正在使用colorbox显示单独但本地的文档。问题，我以前从未这样做过，所以很明显，我无法获得弹出的页面用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标题和正文标记的完整文档，则不显示任何内容。

Answer 1

再次，如examples page所示;你需要将内联设置为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>

使用colorbox显示单独的文档

1 个答案: