Bits of .NET

📱 Built-in Modal, No Library

<dialog> element creates native modals. Accessibility, focus management, backdrop — all built-in. No more 100KB modal libraries.

📝 Basic Dialog

<dialog id="myDialog">
  <h2>Confirm Action</h2>
  <p>Are you sure you want to delete this item?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

<button onclick="myDialog.showModal()">Open Modal</button>

<script>
  myDialog.addEventListener('close', () => {
    console.log('Closed with:', myDialog.returnValue);
  });
</script>

🎯 Styling Dialog

dialog {
  border: none;
  border-radius: 16px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 20px 35px -10px rgba(0,0,0,0.3);
}

/* Backdrop (overlay) */
dialog::backdrop {
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

/* Animation */
dialog[open] {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

✅ Methods

// Show as modal (with backdrop, prevents background interaction)
dialog.showModal();

// Show as non-modal (no backdrop, background still interactive)
dialog.show();

// Close programmatically
dialog.close();

// Close with return value
dialog.close('confirmed');

// Check if open
dialog.open // boolean

// Close on ESC automatically (built-in!)

💡 Accessibility Built-in

• Focus trapped inside dialog automatically
• ESC key closes dialog by default
• Focus returns to triggering element on close
• ARIA attributes added automatically
• Keyboard navigation works out of box