import React, { useState } from 'react'; function Modal({ title, onClose }) { return ( <div role='dialog' aria-modal='true' aria-label={title} onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'grid', placeItems: 'center', padding: 16 }} > <div style={{ width: 'min(92%, 420px)', borderRadius: 16, background: '#fff', padding: 16 }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <strong>{title}</strong> <button type='button' onClick={onClose} style={{ border: 0, background: 'transparent', fontSize: 18 }}>×</button> </div> <div style={{ marginTop: 12, color: '#555' }}>This modal is part of a stack.</div> </div> </div> ); } export default function App() { const [stack, setStack] = useState([]); function open() { setStack((prev) => [...prev, { id: Date.now(), title: 'meetcode modal ' + (prev.length + 1) }]); } function closeTop() { setStack((prev) => prev.slice(0, -1)); } const top = stack[stack.length - 1]; return ( <div style={{ padding: 16 }}> <h2 style={{ marginTop: 0 }}>Modal stack</h2> <button type='button' onClick={open} style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Open modal</button> <div style={{ marginTop: 10, color: '#555' }}>Open modals: {stack.length}</div> {top ? <Modal title={top.title} onClose={closeTop} /> : null} </div> ); }