Bits of .NET

Bootstrap modals require heavy JavaScript. HTML5 dialog element is native, lightweight, and fully accessible.

HTML:

<dialog id="myDialog">
    <h2>Modal Title</h2>
    <p>Modal content here</p>
    <button onclick="closeDialog()">Close</button>
</dialog>

<button onclick="openDialog()">Open Modal</button>

JavaScript:

function openDialog() {
    document.getElementById('myDialog').showModal();
}

function closeDialog() {
    document.getElementById('myDialog').close();
}

// Close on backdrop click
myDialog.addEventListener('click', (e) => {
    if (e.target === myDialog) myDialog.close();
});

Features:
Auto-traps focus, Esc key closes, ::backdrop for overlay styling, fully accessible!