This example shows a button that opens a modal with an overlay. The modal can be closed by clicking the close button, clicking outside the modal, or pressing Escape. It uses Tailwind CSS classes for styling and accessibility features like aria-modal and focus management.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Modal Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<button id="openModal" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">Open Modal</button>
<!-- Modal and overlay hidden by default -->
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<div class="bg-white p-6 rounded shadow-lg max-w-md w-full relative" tabindex="-1">
<button id="closeModal" class="absolute top-3 right-3 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-400" aria-label="Close modal">x</button>
<h2 id="modalTitle" class="text-xl font-semibold mb-4">Welcome to the Modal</h2>
<p class="mb-4">This is a simple modal using Tailwind CSS. Click outside or the close button to dismiss.</p>
<button id="confirmBtn" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400">Confirm</button>
</div>
</div>
<script>
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
openBtn.addEventListener('click', () => {
modal.classList.remove('hidden');
// Focus the modal for accessibility
modal.querySelector('div').focus();
});
closeBtn.addEventListener('click', () => {
modal.classList.add('hidden');
openBtn.focus();
});
// Close modal when clicking outside the modal content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.add('hidden');
openBtn.focus();
}
});
// Optional: Close modal with Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
modal.classList.add('hidden');
openBtn.focus();
}
});
</script>
</body>
</html>
