查看“︁微件:Modal”︁的源代码

<includeonly>
<button class="modal-trigger" style="
  padding:8px 20px;
  background:<!--{$btnColor|default:'#4CAF50'}-->;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  transition:background 0.3s;
"><!--{$btnText|default:'打开'}--></button>
<div class="modal-overlay" style="
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(4px);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
">
  <div class="modal-box" style="
    background:#fff;
    border-radius:16px;
    padding:24px;
    max-width:<!--{$width|default:'500'}-->px;
    width:90%;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 8px 40px rgba(0,0,0,0.3);
    animation:modalFadeIn 0.3s ease;
  ">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <h3 style="margin:0;font-size:18px;"><!--{$title|default:'提示'}--></h3>
      <button class="modal-close" style="
        background:transparent;
        border:none;
        font-size:24px;
        cursor:pointer;
        color:#999;
        padding:0 4px;
      ">×</button>
    </div>
    <div class="modal-body"><!--{$content}--></div>
  </div>
</div>
<style>
@keyframes modalFadeIn {
  from { opacity:0; transform:scale(0.9); }
  to { opacity:1; transform:scale(1); }
}
</style>
<script>
(function() {
  const trigger = document.currentScript.parentElement.querySelector('.modal-trigger');
  const overlay = document.currentScript.parentElement.querySelector('.modal-overlay');
  const closeBtn = overlay.querySelector('.modal-close');
  if (!trigger || !overlay) return;
  
  function openModal() { overlay.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
  function closeModal() { overlay.style.display = 'none'; document.body.style.overflow = ''; }
  
  trigger.addEventListener('click', openModal);
  closeBtn.addEventListener('click', closeModal);
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closeModal();
  });
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && overlay.style.display === 'flex') closeModal();
  });
})();
</script>
</includeonly>