Question

我在彩色框中有一个隐藏div的页面，我在链接点击时显示。彩盒可以很好地工作，但显示需要大约8秒钟。我没有进行任何后端查询，我只显示现有（隐藏）文本和更改样式。我用open：true实例化了colorbox，这似乎没有任何效果。有任何想法吗？这是我的代码：

<script>
  jQuery(document).ready(function() {
    jQuery('.colorbox').colorbox({
      width: '50%', 
      open: true, 
      left: '2%'
    });

    jQuery('.colorbox').bind('cbox_complete', function() {
      jQuery('#colorbox').addClass("colorbox_opened");
    });

    jQuery('.colorbox').bind('cbox_closed', function() {
      jQuery('#colorbox').removeClass("colorbox_opened");
    });

    jQuery('#cboxClose').bind('cbox_load', function() {
      jQuery('#cboxClose').hide();
    });

    jQuery('#cboxClose').bind('cbox_complete', function() {
      jQuery('#cboxClose').show();
    });

  });

</script>

HTML看起来像这样：

<div id="colorbox" class="colorbox_opened" style="display: block; padding-bottom: 30px; padding-right: 0px; top: 0px; left: 33px; position: absolute; width: 818px; height: 239px;">
  <div id="cboxWrapper" style="height: 269px; width: 818px;">
    <div>
      <div id="cboxTopLeft" style="float: left;"></div>
      <div id="cboxTopCenter" style="float: left; width: 818px;"></div>
      <div id="cboxTopRight" style="float: left;"></div>
    </div>
    <div style="clear: left;">
      <div id="cboxMiddleLeft" style="float: left; height: 239px;"></div>
      <div id="cboxContent" style="float: left; width: 818px; height: 239px;">
      <div id="cboxLoadedContent" style="display: block; width: 818px; overflow: auto; height: 239px;">
        <h1>FAQ</h1>
        <div id="faq_show">
          <h3>Question</h3>
          <div class="question"> My question text </div>
          <h3>Answer</h3>
          <div class="answer"> My answer text </div>
          <div>
            <a href="/setup/faqs/11/edit">Edit</a>
          </div>
        </div>
      </div>
      <div id="cboxLoadingOverlay" style="float: left; display: none;"></div>
      <div id="cboxLoadingGraphic" style="float: left; display: none;"></div>
      <div id="cboxTitle" style="float: left; display: block;"></div>
      <div id="cboxCurrent" style="float: left; display: none;"></div>
      <div id="cboxNext" style="float: left; display: none;"></div>
      <div id="cboxPrevious" style="float: left; display: none;"></div>
      <div id="cboxSlideshow" style="float: left; display: none;"></div>
      <div id="cboxClose" style="float: left;">close</div>
    </div>
    <div id="cboxMiddleRight" style="float: left; height: 239px;"></div>
  </div>

Answer 1

您是否已在此处查看彩盒示例：http://www.jacklmoore.com/colorbox/example1/

当您查看源代码时，您会注意到所有回调都插入到colorbox init中，如下所示：

$(".callbacks").colorbox({
                onOpen:function(){
                     alert('onOpen: colorbox is about to open');
                     },
                onLoad:function(){
                     alert('onLoad: colorbox has started to load the 
                     targeted content'); },
                onComplete:function(){
                     alert('onComplete: colorbox has displayed
                     the loaded content'); },
                onCleanup:function(){
                     alert('onCleanup: colorbox has begun the close process'); },
                onClosed:function(){
                     alert('onClosed: colorbox has completely
               closed');
               }
});

我想当你把它作为例子而只是调整功能以满足你的要求时会更容易。

colorbox在过度等待后显示文本

1 个答案: