如何实现点击背景（排除内容区）关闭全屏iframe模态框？

Hey there! I get that JS basics can feel tricky, but let's break this down simply to get your modal closing when clicking the background.

Your current setup uses a fullscreen iframe as the modal, with a close button that calls parent.$.fancybox.close() inline. To add the background click functionality, we just need to listen for clicks on your #wrapper element, but make sure we only trigger the close when the click is actually on the background (not the #content div or its children).

Step-by-Step Solution #

1. Add a click listener to your wrapper
   We'll check if the click target is the #wrapper itself (meaning it's the background area) and then call the close function.

2. Prevent clicks inside content from triggering the close
   Since #content is inside #wrapper, clicks on content will bubble up to the wrapper by default. We'll stop that propagation so only true background clicks work.

Code Implementation #

Here's how to update your code:

HTML (keep your existing structure, no changes needed here):

<div id="wrapper">
  <div id="content">
    <div id="closeButton" onClick="parent.$.fancybox.close();"> &times; </div>
  </div>
</div>

Vanilla JavaScript (add this script somewhere in your iframe):

// Get the wrapper element
const wrapper = document.getElementById('wrapper');
// Get the content element
const content = document.getElementById('content');

// Listen for clicks on the wrapper
wrapper.addEventListener('click', function(e) {
  // Only trigger close if the click is directly on the wrapper (background)
  if (e.target === wrapper) {
    parent.$.fancybox.close();
  }
});

// Stop clicks inside content from bubbling up to the wrapper
content.addEventListener('click', function(e) {
  e.stopPropagation();
});

If you're using jQuery (alternative):

$('#wrapper').on('click', function(e) {
  // Check if the clicked element is the wrapper itself
  if ($(e.target).is('#wrapper')) {
    parent.$.fancybox.close();
  }
});

$('#content').on('click', function(e) {
  // Prevent click from reaching the wrapper
  e.stopPropagation();
});

How This Works #

• The wrapper click listener checks if the event target is exactly the #wrapper element. If yes, that means the user clicked the background area outside #content, so we call the close function.
• The content click listener stops the click event from bubbling up to the wrapper, so clicking anywhere inside #content (including your close button) won't accidentally trigger the background close.

That should do the trick! Now your modal will close both when clicking the close button and when clicking the empty background area.

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