ASP页面Edge浏览器点击链接弹窗拦截需求实现咨询

Hey there! Let's tackle this problem step by step. You want to show a modal with a dimmed background when Edge users click your link, block the default jump action, but keep the link fully functional for folks using other browsers. Here's a robust approach tailored for your .asp page:

1. Add the HTML Structure #

First, drop this markup into your .asp page—this includes your target link and the hidden modal that'll pop up for Edge users:

<!-- Your existing link (update the href to your target URL) -->
<a href="your-target-page.asp" id="restrictedLink">Go to Target Page</a>

<!-- Edge warning modal (hidden by default) -->
<div id="edgeWarningModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>*This application does not support the Edge browser.*</p>
  </div>
</div>

2. Style the Modal & Background #

Add this CSS to make the modal look clean and block out the background when it's active:

/* Modal overlay - covers the entire screen with a semi-transparent black */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* Modal content box - centered and styled */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 2rem;
  border: 1px solid #ddd;
  width: 80%;
  max-width: 450px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Close button styling */
.close {
  color: #888;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
}

3. Add the JavaScript Logic #

Embed this script in your .asp page to handle browser detection, link clicks, and modal behavior. It'll check if the user is on Edge, block the link jump, and show the modal—while letting other browsers work normally:

<script type="text/javascript">
// Detect both legacy EdgeHTML and new Chromium-based Edge
function isEdgeBrowser() {
  return /Edg/i.test(navigator.userAgent) || /Edge/i.test(navigator.userAgent);
}

// Grab our elements from the DOM
const targetLink = document.getElementById('restrictedLink');
const warningModal = document.getElementById('edgeWarningModal');
const closeModalBtn = document.querySelector('.close');

// Handle link click event
targetLink.addEventListener('click', function(e) {
  if (isEdgeBrowser()) {
    e.preventDefault(); // Stop the link from jumping
    warningModal.style.display = 'block'; // Show the warning modal
  }
  // For non-Edge browsers, the link will behave normally
});

// Close modal when clicking the X button
closeModalBtn.addEventListener('click', function() {
  warningModal.style.display = 'none';
});

// Close modal when clicking outside the content box
window.addEventListener('click', function(e) {
  if (e.target === warningModal) {
    warningModal.style.display = 'none';
  }
});
</script>

4. Quick Notes for Testing #

• Browser Detection: The function checks for both old and new Edge versions—if you only need to target one, you can tweak the regex (e.g., remove /Edge/i if you don't care about legacy Edge).
• ASP Flexibility: If you want to pre-hide/show elements server-side, you can read the Request.ServerVariables("HTTP_USER_AGENT") in your ASP code, but client-side detection is better here because it runs at click time (in case the user switches browsers without reloading).
• Link Usability: The link stays fully functional—if an Edge user closes the modal and clicks again, they'll see the warning again instead of accidentally jumping.

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