About Accessible Modal Dialogs
Use the <dialog>
tag for modal dialogs when you need to capture focus among the fields within the dialog:
<button id="openDialog">Open Form Dialog</button>
<dialog id="formDialog">
<form method="dialog">
<h2>Subscribe to our Newsletter</h2>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<button type="button" id="cancelButton">Cancel</button>
<button type="submit">Subscribe</button>
</div>
</form>
</dialog>
<script>
const openButton = document.getElementById('openDialog');
const dialog = document.getElementById('formDialog');
const cancelButton = document.getElementById('cancelButton');
// Open dialog
openButton.addEventListener('click', () => {
dialog.showModal();
});
// Close dialog on cancel
cancelButton.addEventListener('click', () => {
dialog.close();
});
// Handle form submission
dialog.addEventListener('close', () => {
if (dialog.returnValue !== '') {
const formData = new FormData(dialog.querySelector('form'));
console.log('Form submitted with:', Object.fromEntries(formData));
}
});
</script>
Also by me
Django Paddle Subscriptions app
For Django-based SaaS projects.
Django App for You
Django GDPR Cookie Consent app
For Django websites that use cookies.
Django App for You