Modal Without a JavaScript Library

You probably don't need a modal library for a simple dialog anymore. Modern HTML provides the native <dialog> element, with built-in support for modal behavior, the Escape key, the top layer, and dialog forms.

The Old Way: Build Everything Yourself

A traditional modal often starts with a <div> and quickly turns into a collection of CSS and JavaScript workarounds.

<div id="modal" class="modal">
 <div class="modal-content">
    <h2>Delete Account? </h2>
    <button>Cancel</button>
    <button>Delete</button>
 </div>
</div>

Then you typically need CSS such as:

.modal {
 position: fixed;
 inset: 0;
 z-index: 9999;
}

And JavaScript to handle opening and closing the modal, the Escape key, focus management, and often clicking outside the dialog.

None of this is inherently wrong, but for a basic dialog it means implementing behavior that the browser can already provide for you.

Meet the Native <dialog> Element

HTML provides the <dialog> element specifically for dialogs and modal interfaces.

A minimal modal can be as simple as:

<button id="openModal">Delete account</button>

<dialog id="confirmDialog">
    <h2>Delete account?</h2>
    <p>This action cannot be undone.</p>

    <button id="cancelButton">Cancel</button>
    <button>Delete</button>
</dialog>

<script>
    const dialog = document.querySelector('#confirmDialog');
    document.querySelector('#openModal').addEventListener('click', () => dialog.showModal());
    document.querySelector('#cancelButton').addEventListener('click', () => dialog.close());
</script>

The important difference is that the browser understands that this is a dialog. You are no longer pretending that an ordinary <div> is a modal.

showModal() vs show()

The <dialog> element has two commonly used methods for displaying itself:

• showModal()
• show()

showModal()

Use showModal() when you want a true modal dialog.

dialog.showModal();

The dialog is placed in the browser's top layer and the rest of the document becomes inert while the modal is open.

In other words, the user is expected to interact with the dialog before returning to the page behind it.

show()

show() displays the dialog without making it modal.

dialog.show();

The page behind the dialog remains interactive. This can be useful when you want dialog-like UI without blocking the rest of the page.

For most confirmation dialogs, forms, and actions that require the user's attention, showModal() is usually the appropriate choice.

The Escape Key Comes Built In

With a modal dialog opened using showModal(), the browser provides native handling for the Escape key.

Pressing Escape can close the modal without requiring you to write a separate keydown listener just for this basic behavior.

That's one less piece of modal infrastructure to maintain yourself.

Close a Dialog With method="dialog"

One of the most useful features of <dialog> is its integration with forms.

Add method="dialog" to a form inside the dialog:

<dialog id="confirmDialog">

<form method="dialog">
    <h2>Delete account?</h2>

    <p>This action cannot be undone.</p>

    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
</form>

Submitting the form closes the dialog without requiring JavaScript to call dialog.close().

The submitted button's value is also available through the dialog's returnValue.

dialog.addEventListener('close', () => {
 console.log(dialog.returnValue);
});

If the user clicks Cancel, the value is cancel. If they click Delete, it is confirm.

A Practical Confirmation Modal

Putting the pieces together, a simple confirmation dialog requires very little code:

<dialog id="confirmDialog">
    <form method="dialog">
        <h2>Delete account?</h2>

        <p>This action cannot be undone.</p>

        <button value="cancel">Cancel</button>
        <button value="confirm">Delete</button>
    </form>
</dialog>

There is no modal library, no z-index: 9999, and no custom Escape-key handler.

What About the Backdrop?

A modal opened with showModal() has a backdrop that can be styled using the ::backdrop pseudo-element.

dialog::backdrop {
 background: rgb(0 0 0 / 50%);
}

This is preferable to creating another full-screen <div> just to simulate an overlay.

What You Still Need to Handle

Native dialogs remove a lot of unnecessary JavaScript, but they do not eliminate the need to think about the user experience.

You still need to provide a meaningful heading, clear actions, sensible focus behavior for your particular interface, and appropriate styling. If you add custom interactions, test the result with keyboard navigation and assistive technologies.

The goal is not "zero JavaScript." The goal is to stop writing JavaScript for behavior the platform already provides.

When Should You Use <dialog>?

The native dialog element is a good fit for interfaces such as:

• Confirmation dialogs
• Delete or destructive-action confirmations
• Login and signup dialogs
• Small forms
• Settings or preference dialogs
• Other temporary modal interactions

If you are building a highly specialized component with complex behavior, you may still need additional JavaScript or a component library. But for a straightforward modal, start with the platform's native solution.

Final Takeaway

The <dialog> element gives modern web applications a native foundation for modal interfaces.

Remember the three important pieces:

• showModal() — opens a modal dialog in the top layer.
• show() — opens a non-modal dialog.
• method="dialog" — lets a form close its containing dialog.

Before reaching for a modal library, check what the HTML platform already gives you.

Use HTML for behavior the browser already understands. Write JavaScript for the behavior that is actually yours.