Modal Enter Effect — StealThis.dev

الكود

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0f172a;
  color: #e2e8f0;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.open-btn {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #3b82f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.backdrop.open {
  opacity: 1;
}

.backdrop.closing {
  opacity: 0;
}

.modal {
  background: #1e293b;
  padding: 1.5rem;
  border-radius: 12px;
  max-width: 90vw;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.backdrop.open .modal {
  transform: scale(1);
  opacity: 1;
}

.backdrop.closing .modal {
  transform: scale(0.95);
  opacity: 0;
}

.modal h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}
.modal p {
  margin: 0 0 1rem;
  color: #94a3b8;
}

.close-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  color: #e2e8f0;
  background: #334155;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

const openBtn = document.getElementById("open");
const backdrop = document.getElementById("backdrop");
const modal = document.getElementById("modal");
const closeBtn = document.getElementById("close");

openBtn.addEventListener("click", () => {
  backdrop.hidden = false;
  requestAnimationFrame(() => backdrop.classList.add("open"));
});

function close() {
  backdrop.classList.add("closing");
  backdrop.classList.remove("open");
  setTimeout(() => {
    backdrop.hidden = true;
    backdrop.classList.remove("closing");
  }, 200);
}

closeBtn.addEventListener("click", close);
backdrop.addEventListener("click", (e) => {
  if (e.target === backdrop) close();
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Modal Enter Effect</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <button type="button" class="open-btn" id="open">Open modal</button>
  <div class="backdrop" id="backdrop" hidden>
    <div class="modal" id="modal">
      <h2>Modal</h2>
      <p>Fade + scale enter/exit.</p>
      <button type="button" class="close-btn" id="close">Close</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Fade + scale enter/exit for modal dialogs and overlays. Reference patterns from modal-dialog and snackbar.

Features

CSS opacity and transform for enter/exit
Backdrop fade
Optional prefers-reduced-motion respect