Combining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.
Before you use this example
This is not the best way to make modal dialogs accessible without JavaScript. Consider using Dialog with React Router instead.
Try it by hard-refreshing this page. Then click on the Show modal
button below before JavaScript finishes loading.
Your payment has been successfully processed. We have emailed your receipt.
By default, browsers apply some default styles to the details
element. We can reset them with the following CSS:
.button {
appearance: none;
}
.button::marker,
.button::-webkit-details-marker {
display: none;
}
Since we're changing between non-modal and modal
states and, therefore, between non-portal and portal
dialogs right after it's shown, there may be a layout shift if the browser has visible scrollbars.
To fix this, we can use the --scrollbar-width
CSS variable:
.dialog {
margin-left: calc(var(--scrollbar-width, 0) * -0.5);
}
Learn more in Styling.