AJAX 獲取頁面內容彈窗顯示：正確姿勢是動態注入而非跳轉

1. 獲取 HTML 片段（responseText）。
2. 在當前頁創建/填充彈窗容器（div + CSS 定位）。
3. 將 HTML 注入容器 innerHTML 或 $(modal).html(data)。
4. 初始化彈窗組件（Bootstrap Modal, Layer, SweetAlert2 等）。

輕量級原生實現

<style>
.modal { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; border:1px solid #ccc; z-index:999; max-width:80%; max-height:80%; overflow:auto; }
.mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:998; }
</style>
<div id="mask" class="mask"></div>
<div id="modal" class="modal"></div>

<script>
document.querySelectorAll('a.ajax-modal').forEach(a => {
  a.onclick = e => {
    e.preventDefault();
    fetch(a.href).then(r => r.text()).then(html => {
      document.getElementById('modal').innerHTML = html;
      document.getElementById('mask').style.display = 'block';
      document.getElementById('modal').style.display = 'block';
    });
  };
});
document.getElementById('mask').onclick = () => {
  document.getElementById('mask').style.display = 'none';
  document.getElementById('modal').style.display = 'none';
};
</script>

生產建議

• 使用成熟彈窗庫：Bootstrap Modal、Layer、SweetAlert2，處理居中、拖拽、Esc 關閉、無障礙等細節。
• 服務端返回**純 HTML 片段**（不含 ``），或返回 JSON 數據由前端渲染模板。
• 注意 XSS：若內容不可信，需 DOMPurify 淨化後再注入。

**AJAX 的價值在於「不離開當前頁完成交互」**，彈窗只是展示形式之一。