Fancybox 2.1加载AJAX模板顶部出现大空白问题求助

Let’s walk through what’s causing this frustrating position glitch and how to fix it properly.

What’s Going Wrong #

Your current code spins up two separate Fancybox instances: one for the loading spinner, then another for the loaded AJAX content. When the second instance initializes, Fancybox’s positioning logic gets confused—either by leftover state from the first instance, or by the long content throwing off its viewport calculations. On top of that, your custom dropIn animation modifies the top value in a way that clashes with built-in centering when content overflows the viewport.

Step-by-Step Fixes #

1. Reuse One Fancybox Instance (Don’t Create Two) #

Instead of opening a brand new Fancybox for the loaded content, update the existing instance’s content once the AJAX call finishes. This keeps the positioning context consistent.

Here’s the revised click handler:

$(document).ready(function() {
  $(".trees-modal-button").click(function(e) {
    e.preventDefault();
    
    // Open Fancybox once with the loading state
    var fancyboxInstance = $.fancybox.open({
      maxWidth : 700,
      maxHeight : 600,
      fitToView : false,
      width : '100%',
      height : '70%',
      autoSize : false,
      autoDimensions: false,
      autoCenter : true,
      closeClick : false,
      openMethod:'dropIn',
      openSpeed:200,
      closeMethod:'dropOut',
      closeSpeed:200,
      helpers : {
        overlay : { locked : true }
      },
      content: `<div class="loading-directive" style="display: block; position: relative; margin: auto;"> <div class="loader"> <svg class="circular"> <circle class="path" cx="32" cy="32" r="30" fill="none" stroke-width="4"> </circle> </svg> </div> </div>`
    });

    // Load AJAX content and update the existing Fancybox
    $.get('/pages/tree-planting-temp-noindex', null, function(data) {
      // Swap in the new content
      fancyboxInstance.update({
        content: data
      });
      // Force Fancybox to re-calculate the correct position
      $.fancybox.center();
    });
  });
});

2. Tweak the Custom dropIn Animation #

Your current animation subtracts 50px from the calculated top position, which can push the modal way down when dealing with long content. Adjust it to respect your 20px minimum top offset:

(function ($, F) { 
  // Opening animation - fly from top, but respect min 20px offset
  F.transitions.dropIn = function() {
    var endPos = F._getPosition(true);
    // Start at least 20px from top, minus 50px for the animation slide-in
    var startTop = Math.max(parseInt(endPos.top, 10), 20) - 50;
    endPos.top = startTop + 'px';
    endPos.opacity = 0;
    F.wrap.css(endPos).show().animate({ 
      top: '+=' + 50 + 'px', 
      opacity: 1 
    }, { 
      duration: F.current.openSpeed, 
      complete: F._afterZoomIn 
    });
  };

  // Closing animation - fly to the top
  F.transitions.dropOut = function() {
    F.wrap.removeClass('fancybox-opened').animate({ 
      top: '-=50px', 
      opacity: 0 
    }, { 
      duration: F.current.closeSpeed, 
      complete: F._afterZoomOut 
    });
  };
}(jQuery, jQuery.fancybox));

3. Add CSS to Enforce Position and Scroll Rules #

Add this CSS to lock the modal to your 20px top offset and prevent unwanted background scrolling:

/* Keep modal at least 20px from top, limit height to viewport */
.fancybox-wrap {
  top: 20px !important;
  max-height: calc(100vh - 40px) !important; /* Leave 20px bottom space too */
  overflow-y: auto !important; /* Let modal content scroll internally */
}

/* Make sure background stays locked when modal is open */
.fancybox-lock {
  overflow: hidden !important;
}

Why This Works #

• Reusing one Fancybox instance keeps the positioning logic from getting confused by multiple overlapping instances.
• The adjusted animation respects your 20px minimum top, so the modal never starts from an invalid position.
• The CSS fixes enforce the top offset and limit the modal height to the viewport, so users don’t have to scroll up to see the modal’s top.

Test this setup, and you’ll see the modal stays anchored to the top (no giant blank space above) while letting users scroll inside the modal for the long content.

内容的提问来源于stack exchange，提问作者Delto