新手求助：如何在HTML页面中以带折叠角的响应式弹窗打开另一个HTML页面？

Absolutely! This is totally achievable with vanilla JavaScript and some CSS to get that cool folded-corner look. As a fellow JS learner, I’ll break this down into simple steps you can follow easily:

1. Tweak your HTML structure #

First, replace your existing link with a trigger button, then add a modal container to hold the content that was on your other page:

<!-- Old link (replace this) -->
<!-- <a href="other-page.html" class="modal-trigger">查看内容</a> -->

<!-- New trigger button -->
<button class="modal-trigger">查看内容</button>

<!-- Modal container -->
<div class="modal">
  <div class="modal-content">
    <!-- Paste the content from your "other-page.html" right here -->
    <h3>其他页面的标题</h3>
    <p>这是原本要跳转页面的内容，现在直接放在弹窗里展示啦！</p>
    <button class="modal-close">关闭弹窗</button>
  </div>
</div>

2. Add CSS for the folded-corner & responsive style #

This is where we’ll make the modal look good, including that folded corner effect using CSS pseudo-elements:

/* Modal background overlay */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Main modal content box */
.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 4px;
  position: relative;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Folded corner effect */
.modal-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 30px solid #e0e0e0; /* Fold color */
  border-left: 30px solid transparent;
}

.modal-content::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 30px solid white; /* Match modal background */
  border-left: 30px solid transparent;
  transform: translate(-3px, -3px); /* Shift to create depth */
}

/* Button styles */
.modal-trigger {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-close {
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  background: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Responsive adjustments for small screens */
@media (max-width: 480px) {
  .modal-content::after,
  .modal-content::before {
    border-bottom-width: 20px;
    border-left-width: 20px;
  }
}

3. Add JavaScript for interactivity #

This code handles opening/closing the modal, plus extra usability features like closing with the Escape key or clicking the background:

// Grab all the elements we need
const triggerBtn = document.querySelector('.modal-trigger');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.modal-close');

// Open modal when trigger is clicked
triggerBtn.addEventListener('click', () => {
  modal.style.display = 'flex';
});

// Close modal when close button is clicked
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// Close modal when clicking the background overlay
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

// Close modal when Escape key is pressed
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modal.style.display === 'flex') {
    modal.style.display = 'none';
  }
});

Quick tips for beginners: #

• If your other page has a lot of content, you can use fetch() to load it dynamically instead of pasting it directly. Start with the copy-paste method first though—it’s simpler!
• Adjust the folded corner’s size/color by modifying the border-bottom-width and color values in the CSS pseudo-elements.
• The modal is fully responsive—it’ll shrink to fit smaller screens automatically.

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