Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <dialog> element provides a native way to create dialogs - no libraries needed! It supports both modal (blocks interaction with page) and non-modal (allows interaction) modes.
showModal()show()<dialog id="myDialog">
<h2>Dialog Title</h2>
<p>Dialog content goes here...</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<script>
document.getElementById('myDialog').showModal();
</script>Opens dialog as modal with backdrop
dialog.showModal();Opens dialog as non-modal
dialog.show();Closes the dialog
dialog.close('returnValue');Fired when dialog is closed
dialog.addEventListener('close', () => {
console.log(dialog.returnValue);
});Fired when ESC is pressed (modal only)
dialog.addEventListener('cancel', (e) => {
e.preventDefault(); // Prevent close
});When a <form> inside a dialog has method="dialog", submitting it closes the dialog without page reload.
<dialog id="confirmDialog">
<form method="dialog">
<p>Are you sure you want to delete?</p>
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('confirmDialog');
dialog.addEventListener('close', () => {
if (dialog.returnValue === 'confirm') {
console.log('User confirmed!');
}
});
</script>value attribute of the clicked button becomes dialog.returnValue.Use the ::backdrop pseudo-element to style the overlay that appears behind modal dialogs.
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}dialog::backdrop {
backdrop-filter: blur(5px);
}dialog::backdrop {
background: linear-gradient(
45deg,
rgba(59,130,246,0.5),
rgba(147,51,234,0.5)
);
}dialog::backdrop {
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Ask user to confirm destructive actions
Delete, Logout, Discard changesShow important notifications
Success, Error, Warning messagesCollect user input in focused context
Login, Sign up, Settings formsDisplay media in full view
Photo gallery, Video playerPrivacy notices (non-modal)
GDPR compliance bannersContextual information
Feature tours, Help docsSee modal and non-modal dialogs with different styles and behaviors
Basic modal with backdrop and ESC to close
<div class="dialog-container">
<h3>Simple Modal Dialog</h3>
<p class="description">Basic modal with backdrop and ESC to close</p>
<button class="open-btn" id="openModal1">Open Simple Modal</button>
<dialog id="modal1" class="simple-dialog">
<div class="dialog-header">
<h3>Welcome! 👋</h3>
<button class="close-btn" id="closeModal1">×</button>
</div>
<div class="dialog-content">
<p>This is a simple modal dialog. Click the X button, press ESC, or click outside to close.</p>
</div>
</dialog>
<div class="info-badge">
⌨️ Press ESC to close
</div>
</div>
<p class="note">💡 showModal() displays the dialog as a modal with a backdrop</p>Loading preview...
Modal with form method="dialog" for return values
<div class="dialog-container">
<h3>Confirmation Dialog</h3>
<p class="description">Get user confirmation with return values</p>
<button class="open-btn" id="openConfirm">Delete Item</button>
<p class="result" id="confirmResult"></p>
<dialog id="confirmDialog" class="confirm-dialog">
<form method="dialog">
<div class="dialog-header">
<h3>⚠️ Confirm Deletion</h3>
</div>
<div class="dialog-content">
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
</div>
<div class="dialog-actions">
<button value="cancel" class="btn-secondary">Cancel</button>
<button value="confirm" class="btn-danger">Delete</button>
</div>
</form>
</dialog>
<div class="info-badge">
✓ Form method="dialog" returns value
</div>
</div>
<p class="note">💡 form method="dialog" closes the dialog and returns the button value</p>Loading preview...
Page remains interactive, no backdrop
<div class="dialog-container">
<h3>Non-Modal Dialog</h3>
<p class="description">Dialog doesn't block page interaction</p>
<button class="open-btn" id="openNonModal">Open Non-Modal</button>
<p class="note-inline">Try clicking this text while dialog is open!</p>
<dialog id="nonModal" class="non-modal-dialog">
<div class="dialog-header">
<h3>📝 Info Panel</h3>
<button class="close-btn" id="closeNonModal">×</button>
</div>
<div class="dialog-content">
<p>This is a non-modal dialog. You can still interact with the page behind it!</p>
</div>
</dialog>
<div class="info-badge">
🖱️ Page remains interactive
</div>
</div>
<p class="note">💡 show() displays the dialog without a backdrop</p>Loading preview...
Custom styling with gradient header and blur backdrop
<div class="dialog-container">
<h3>Styled Dialog</h3>
<p class="description">Custom styles and backdrop effects</p>
<button class="open-btn" id="openStyled">Open Styled Dialog</button>
<dialog id="styledDialog" class="styled-dialog">
<div class="dialog-header gradient">
<h3>✨ Premium Feature</h3>
<button class="close-btn white" id="closeStyled">×</button>
</div>
<div class="dialog-content">
<p>This dialog has custom styling including gradient header and blur backdrop.</p>
<ul>
<li>✓ Gradient header</li>
<li>✓ Blur backdrop</li>
<li>✓ Smooth animations</li>
</ul>
</div>
<div class="dialog-actions">
<button class="btn-primary">Get Started</button>
</div>
</dialog>
<div class="info-badge">
🎨 Custom backdrop with blur
</div>
</div>
<p class="note">💡 Use ::backdrop pseudo-element for custom backdrop styling</p>Loading preview...
showModal() for important dialogsaria-label attributesmethod="dialog" for forms::backdrop for better UXPlay around with modal and non-modal dialog examples