链接含指定字符串触发弹窗异常：点击所有链接均弹出模态框

Got it, let's break down what's going wrong here and fix it step by step. Your goal is to only show the modal when a link contains a specific string (like "cheese"), but right now every link click triggers it—here's why and how to fix it:

What's Wrong With the Current Code #

1. Incorrect preventDefault usage: You wrote event.preventDefault; (missing parentheses), which doesn't actually run the function. Even worse, the logic doesn't restrict when we block the default link behavior.
2. No check for your target keyword: The existing code checks for .my.test.here/ and something.else/ instead of your desired keyword (e.g., "cheese"), and has a syntax error (&& || is invalid) in the second condition.
3. Event binding quirk: Using jQuery('a') as the delegate selector in .on() works but is better written as the string 'a' for consistency.

Fixed Code #

Here's the revised code that implements your requirement (we'll use "cheese" as the target keyword—swap it for your actual string):

jQuery(function () {
  // Bind click event to all anchor tags (delegated to document)
  jQuery(document).on('click', 'a', function(event) {
    let $link = jQuery(this);
    // Handle cases where the click target is a child element (like a span inside the link)
    if (!$link.is('a')) {
      $link = $link.closest('a');
    }

    const url = $link.attr('href')?.toLowerCase() || '';
    const targetKeyword = 'cheese'; // Replace with your actual keyword

    // Check if the URL contains our target keyword
    if (url.includes(targetKeyword)) {
      event.preventDefault(); // Only block default behavior if keyword is present
      showModal($link.attr('href')); // Show the modal with the full link
    }
    // If keyword isn't present, do nothing—link will navigate normally
  });
});

function showModal(url) {
  // Create backdrop and fade in
  jQuery('<div class="modal-backdrop"></div>').hide().appendTo(document.body).fadeIn();
  
  // Create modal content with the link
  const modalContent = `
    <div class="modal-content" style="padding:10px">
      <h3 style="color:#333">Please copy the blue link below into Internet Explorer</h3>
      <p style="font-size: 1.2rem; color:#333">This form is currently unavailable in Firefox & Chrome.</p>
      <h4 style="color: #0099cc; max-width: 400px; word-wrap:break-word;">${url}</h4>
      <i onclick="closeModal()" class="icon-remove"></i>
    </div>
  `;
  jQuery('body').append(modalContent); // Append to body (or target element)
}

function closeModal() {
  jQuery(".modal-backdrop").fadeOut(function() { jQuery(this).remove(); });
  jQuery('.modal-content').fadeOut(function() { jQuery(this).remove(); });
}

Key Improvements #

• Keyword check: Uses url.includes(targetKeyword) to only trigger the modal when the link contains your specified string.
• Proper preventDefault: Only blocks the link's default navigation when the keyword is found—otherwise, the link works normally.
• Simplified target handling: Uses .closest('a') to reliably get the parent link if the click hits a child element (like a <span> inside the anchor).
• Cleaner modal creation: Uses template literals for easier-to-read modal HTML, and appends content to the body instead of after the link (avoids layout issues).
• Fixed syntax errors: Removed invalid logic operators and added safety checks for missing href attributes.

Notes #

• Replace 'cheese' with your actual target string (e.g., 'cheese' or a partial URL like '/cheese/').
• If you still need browser-specific checks (like the original code's Chrome/Firefox detection), you can add them back inside the keyword check condition, e.g.:

  const isWebkitOrMozilla = /webkit|mozilla/i.test(navigator.userAgent);
  if (url.includes(targetKeyword) && isWebkitOrMozilla) {
    // Trigger modal
  }
  

内容的提问来源于stack exchange，提问作者Off Duty Ninja