使用Fancybox关闭弹窗时出现Cannot read property 'currentHash' of undefined错误求助

Hey there! Let's work through this Fancybox error you're hitting when closing the modal—even though the rest of the functionality works, that console error is definitely worth fixing. Here are the most likely causes and straightforward fixes:

1. Fix the Syntax Error in beforeShow Callback #

Looking at your code, the beforeShow callback uses invalid plain JavaScript syntax (it’s written like TypeScript):

beforeShow(): void { this.title = this.src; },

Correct it to a standard function property, which is what Fancybox expects:

beforeShow: function() {
  this.title = this.src;
},

This syntax mistake could be causing hidden state inconsistencies in Fancybox that only bubble up when closing the modal.

2. Resolve Conflicts with Custom Close Button #

You’re adding a custom close button using the data-fancybox-close attribute in your afterLoad callback. Sometimes this clashes with Fancybox’s internal close logic, especially if the modal’s state isn’t fully initialized when the button is attached.

Replace the custom close button code with a manual click handler that uses Fancybox’s official API instead:

// Remove this line:
// current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');

// Use this instead:
const closeBtn = $('<a class="button-close" href="javascript:;">×</a>');
closeBtn.on('click', function() {
  $.fancybox.close(); // Trigger the official close method directly
});
current.$content.append(closeBtn);

This avoids relying on the data-fancybox-close attribute and ensures we’re triggering the close action in a way Fancybox expects.

3. Check Version Compatibility (Fancybox 2.x vs 3.x) #

If you’re using Fancybox 3.x (the most common recent version), many of your configuration options are outdated from older 2.x versions:

• prevEffect and nextEffect have been replaced with a single effect option
• The helpers object is no longer used; title/caption settings live under the caption option

Here’s how to update your config to match Fancybox 3.x standards:

$(".hotel_gallery").attr("data-fancybox", "quick-view").fancybox({
  effect: "none", // Replaces prevEffect/nextEffect
  closeBtn: true,
  arrows: true,
  beforeShow: function() {
    this.caption = this.src; // Use "caption" instead of "title" in 3.x
  },
  afterLoad: function(instance, current) {
    if (instance.group.length > 1 && current.$content) {
      current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
    }
    const closeBtn = $('<a class="button-close" href="javascript:;">×</a>');
    closeBtn.on('click', () => {
      instance.close(); // Use the current instance's close method for better context
    });
    current.$content.append(closeBtn);
  },
  caption: {
    type: "inside" // Replaces helpers.title.type
  }
});

Step-by-Step Troubleshooting Flow #

1. First fix the beforeShow syntax error and test if the error disappears.
2. If it still occurs, temporarily remove the custom close button and use the default closeBtn to see if that’s the conflict source.
3. If neither works, confirm your Fancybox version and update the config to match the official docs for that version.

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