WordPress Ultimate Popup Plugin问题：点击外部弹窗无法关闭

Hey there! Let's work through why your login popup isn't closing when clicking outside, and fix it up:

1. First Check Plugin Settings (Don't Code Yet!) #

Most popup plugins (including Ultimate Popup) have a built-in setting for closing on overlay click. Head to your plugin's backend configuration panel and look for options like:

• "Close Popup When Clicking Outside"
• "Overlay Click Action"
• "Close on Mask Click"
  If this setting exists and is disabled, turning it on might solve the problem without touching any code.

2. Manually Add Click-Outside Close Logic #

If the plugin doesn't have that setting, we can add custom jQuery to handle the click event. Here's how:
First, use your browser's dev tools to inspect and identify two key elements:

• The overlay/mask that covers the entire page (usually has a class like popup-overlay or up-popup-mask)
• The actual popup content container (e.g., up-popup-content)

Then add this code snippet to your theme's custom JS file or the plugin's custom JS section:

jQuery(document).ready(function($) {
    // Replace with your actual overlay class
    $('.popup-overlay').on('click', function(e) {
        // Ensure we're clicking the overlay itself, not the popup content inside
        if (e.target === this) {
            // Hide both the popup and overlay
            $('.up-popup-content').hide();
            $(this).hide();
            
            // Optional: Clear the cookie if you don't want the popup to reappear right away
            $.removeCookie("p..."); // Use your existing cookie name here
        }
    });
});

3. Check for Event Propagation Blocking #

Sometimes plugin code might use e.stopPropagation() on the popup content, which prevents click events from reaching the overlay. Inspect the plugin's JS code for lines like:

$('.up-popup-content').click(function(e) {
    e.stopPropagation();
});

If you find this, either remove it (if safe to do so) or keep the overlay-targeted click handler from step 2—it should still work since we're directly targeting the overlay element.

4. Double-Check Z-Index Hierarchy #

Even if you adjusted z-index before, confirm these details:

• The overlay has a lower z-index than the popup content (e.g., overlay: 999, popup: 1000)
• The overlay covers the entire viewport (set width: 100%; height: 100%; position: fixed; top: 0; left: 0; in its CSS)
  This ensures clicks outside the popup are actually hitting the overlay, not the page behind it.

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