Modal Dialog

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: #050910;
  color: #f2f6ff;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.demo {
  text-align: center;
}
.demo-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}
.demo-sub {
  color: #475569;
  font-size: 0.875rem;
  margin-bottom: 2rem;
}
.triggers {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn--primary {
  background: #38bdf8;
  color: #0f172a;
}
.btn--primary:hover {
  background: #7dd3fc;
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.btn--danger {
  background: #ef4444;
  color: #fff;
}
.btn--danger:hover {
  background: #f87171;
}

/* ── Backdrop ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Modal ── */
.modal {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  width: 100%;
  max-width: 460px;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.modal-backdrop.is-open .modal {
  transform: none;
}
.modal--sm {
  max-width: 360px;
}
.modal--lg {
  max-width: 560px;
}

/* ── Modal header ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0;
}
.modal-header--alert {
  justify-content: center;
  padding-top: 1.75rem;
}
.modal-title {
  font-size: 1.05rem;
  font-weight: 700;
}
.modal-close {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.25rem;
  border-radius: 0.375rem;
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover {
  color: #f2f6ff;
  background: rgba(255, 255, 255, 0.06);
}

.alert-icon-wrap {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Modal body ── */
.modal-body {
  padding: 1rem 1.5rem 1.25rem;
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
}
.modal-body--center {
  text-align: center;
}
.modal-body--center .modal-title {
  margin-bottom: 0.625rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.form-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: #94a3b8;
}
.input {
  padding: 0.625rem 0.875rem;
  background: #050910;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: #f2f6ff;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.input:focus {
  border-color: #38bdf8;
}

/* ── Modal footer ── */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
}
.modal-footer--center {
  justify-content: center;
}

(function () {
  var FOCUSABLE =
    'a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])';

  function openModal(backdrop) {
    backdrop.classList.add("is-open");
    document.body.style.overflow = "hidden";
    var first = backdrop.querySelector(FOCUSABLE);
    if (first) first.focus();
  }

  function closeModal(backdrop) {
    backdrop.classList.remove("is-open");
    document.body.style.overflow = "";
  }

  // Open
  document.querySelectorAll("[data-modal]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var target = document.getElementById(btn.dataset.modal);
      if (target) openModal(target);
    });
  });

  // Close on × and Cancel
  document.querySelectorAll(".modal-close, .modal-cancel").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var backdrop = btn.closest(".modal-backdrop");
      if (backdrop) closeModal(backdrop);
    });
  });

  // Close on backdrop click
  document.querySelectorAll(".modal-backdrop").forEach(function (backdrop) {
    backdrop.addEventListener("click", function (e) {
      if (e.target === backdrop) closeModal(backdrop);
    });
  });

  // Escape key
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") {
      var open = document.querySelector(".modal-backdrop.is-open");
      if (open) closeModal(open);
    }
  });

  // Focus trap
  document.querySelectorAll(".modal-backdrop").forEach(function (backdrop) {
    backdrop.addEventListener("keydown", function (e) {
      if (e.key !== "Tab") return;
      var focusable = Array.from(backdrop.querySelectorAll(FOCUSABLE));
      if (!focusable.length) return;
      var first = focusable[0],
        last = focusable[focusable.length - 1];
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    });
  });
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Modal Dialog</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="demo">
    <h1 class="demo-title">Modal Dialog</h1>
    <p class="demo-sub">Accessible dialogs — focus trap, Escape to close, scroll lock.</p>
    <div class="triggers">
      <button class="btn btn--primary" data-modal="modal-default">Open Modal</button>
      <button class="btn btn--ghost" data-modal="modal-form">Form Modal</button>
      <button class="btn btn--danger" data-modal="modal-alert">Delete Confirm</button>
    </div>
  </div>

  <!-- Default modal -->
  <div class="modal-backdrop" id="modal-default" role="dialog" aria-modal="true" aria-labelledby="md-title">
    <div class="modal">
      <div class="modal-header">
        <h2 class="modal-title" id="md-title">Edit Profile</h2>
        <button class="modal-close" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body">
        <p>Make changes to your profile here. Click save when you're done.</p>
        <p style="margin-top:0.75rem;color:#64748b;font-size:0.85rem">Your profile is visible to all members of your workspace.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn--ghost modal-cancel">Cancel</button>
        <button class="btn btn--primary">Save changes</button>
      </div>
    </div>
  </div>

  <!-- Form modal -->
  <div class="modal-backdrop" id="modal-form" role="dialog" aria-modal="true" aria-labelledby="mf-title">
    <div class="modal modal--lg">
      <div class="modal-header">
        <h2 class="modal-title" id="mf-title">Invite Team Member</h2>
        <button class="modal-close" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group"><label class="form-label" for="m-name">Full name</label><input id="m-name" type="text" class="input" placeholder="Jane Doe" /></div>
        <div class="form-group"><label class="form-label" for="m-email">Email</label><input id="m-email" type="email" class="input" placeholder="jane@example.com" /></div>
        <div class="form-group"><label class="form-label" for="m-role">Role</label>
          <select id="m-role" class="input"><option>Member</option><option>Admin</option><option>Viewer</option></select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn--ghost modal-cancel">Cancel</button>
        <button class="btn btn--primary">Send Invite</button>
      </div>
    </div>
  </div>

  <!-- Alert / destructive modal -->
  <div class="modal-backdrop" id="modal-alert" role="alertdialog" aria-modal="true" aria-labelledby="ma-title">
    <div class="modal modal--sm">
      <div class="modal-header modal-header--alert">
        <div class="alert-icon-wrap" aria-hidden="true">⚠</div>
      </div>
      <div class="modal-body modal-body--center">
        <h2 class="modal-title" id="ma-title">Delete project?</h2>
        <p>This will permanently delete <strong>"Q4 Campaign"</strong> and all its data. This action cannot be undone.</p>
      </div>
      <div class="modal-footer modal-footer--center">
        <button class="btn btn--ghost modal-cancel">Cancel</button>
        <button class="btn btn--danger">Yes, delete</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

import React, { useRef, useEffect, useCallback, useState } from "react";
import { View, Text, TouchableOpacity, Animated, StyleSheet, Dimensions } from "react-native";

/* ── Modal component ──────────────────────────────────── */

interface ModalDialogProps {
  visible: boolean;
  title: string;
  message: string;
  onConfirm: () => void;
  onCancel: () => void;
  confirmLabel?: string;
  cancelLabel?: string;
  destructive?: boolean;
}

function ModalDialog({
  visible,
  title,
  message,
  onConfirm,
  onCancel,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  destructive = false,
}: ModalDialogProps) {
  const backdropOpacity = useRef(new Animated.Value(0)).current;
  const scale = useRef(new Animated.Value(0.85)).current;
  const contentOpacity = useRef(new Animated.Value(0)).current;
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    if (visible) {
      setMounted(true);
      Animated.parallel([
        Animated.timing(backdropOpacity, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.spring(scale, {
          toValue: 1,
          useNativeDriver: true,
          friction: 8,
          tension: 70,
        }),
        Animated.timing(contentOpacity, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start();
    } else if (mounted) {
      Animated.parallel([
        Animated.timing(backdropOpacity, {
          toValue: 0,
          duration: 180,
          useNativeDriver: true,
        }),
        Animated.timing(scale, {
          toValue: 0.85,
          duration: 180,
          useNativeDriver: true,
        }),
        Animated.timing(contentOpacity, {
          toValue: 0,
          duration: 180,
          useNativeDriver: true,
        }),
      ]).start(() => setMounted(false));
    }
  }, [visible]);

  if (!mounted) return null;

  return (
    <View style={StyleSheet.absoluteFill}>
      <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
        <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onCancel} />
      </Animated.View>

      <View style={styles.center} pointerEvents="box-none">
        <Animated.View style={[styles.dialog, { opacity: contentOpacity, transform: [{ scale }] }]}>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.message}>{message}</Text>

          <View style={styles.actions}>
            <TouchableOpacity style={[styles.btn, styles.cancelBtn]} onPress={onCancel}>
              <Text style={styles.cancelText}>{cancelLabel}</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.btn, destructive ? styles.destructiveBtn : styles.confirmBtn]}
              onPress={onConfirm}
            >
              <Text style={styles.confirmText}>{confirmLabel}</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      </View>
    </View>
  );
}

/* ── Styles ───────────────────────────────────────────── */

const styles = StyleSheet.create({
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.6)",
  },
  center: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
    padding: 32,
  },
  dialog: {
    width: "100%",
    maxWidth: 340,
    backgroundColor: "#1e293b",
    borderRadius: 18,
    padding: 24,
  },
  title: {
    color: "#fff",
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 8,
  },
  message: {
    color: "#94a3b8",
    fontSize: 15,
    lineHeight: 22,
    marginBottom: 24,
  },
  actions: {
    flexDirection: "row",
    gap: 10,
  },
  btn: {
    flex: 1,
    paddingVertical: 13,
    borderRadius: 10,
    alignItems: "center",
  },
  cancelBtn: {
    backgroundColor: "#334155",
  },
  confirmBtn: {
    backgroundColor: "#3b82f6",
  },
  destructiveBtn: {
    backgroundColor: "#dc2626",
  },
  cancelText: {
    color: "#94a3b8",
    fontSize: 15,
    fontWeight: "600",
  },
  confirmText: {
    color: "#fff",
    fontSize: 15,
    fontWeight: "600",
  },
});

/* ── Demo ─────────────────────────────────────────────── */

export default function App() {
  const [showConfirm, setShowConfirm] = useState(false);

  return (
    <View style={demo.container}>
      <Text style={demo.heading}>Modal Dialog</Text>

      <TouchableOpacity style={demo.btn} onPress={() => setShowConfirm(true)}>
        <Text style={demo.btnText}>Open Confirmation</Text>
      </TouchableOpacity>

      <ModalDialog
        visible={showConfirm}
        title="Delete item?"
        message="This action cannot be undone. The item will be permanently removed from your library."
        confirmLabel="Delete"
        cancelLabel="Keep it"
        destructive
        onConfirm={() => setShowConfirm(false)}
        onCancel={() => setShowConfirm(false)}
      />
    </View>
  );
}

const demo = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0f172a",
    justifyContent: "center",
    alignItems: "center",
    padding: 24,
  },
  heading: {
    color: "#fff",
    fontSize: 22,
    fontWeight: "700",
    marginBottom: 32,
  },
  btn: {
    backgroundColor: "#3b82f6",
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 10,
  },
  btnText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});