Most church websites carry a small JavaScript library they never asked for. It shipped with the theme, or it was added the afternoon someone wanted the "Give" button to open a quick popup, and now it loads on every page whether the popup ever appears or not. On a phone in a pew at 10:57 on a Sunday, that library costs real seconds.
There is a native replacement now, and it is one word.
<button popovertarget="give-modal">Give</button>
<div id="give-modal" popover>
<p>Give securely from your phone.</p>
<a href="/give">Open the giving page</a>
</div>
That is a working modal. The button opens it, the Escape key closes it, a click outside dismisses it, and it renders in the top layer above the rest of your page. No library, no event listeners to wire up, no aria-hidden gymnastics on the body.
The popover attribute reached baseline widely available in April 2025, and by this year it is safe to use on a church site without a fallback. Chrome, Edge, Firefox, and Safari all render it. Older browsers simply show the content inline, which is a graceful degradation most churches can live with.
For a church site, three quiet uses earn their place immediately.
A connect-card popover on the homepage, so a first-time guest can leave a name and email without a page load. A service-times popover on the header, so a stranger who found you Saturday night can tap once and see this Sunday. And a quick-give popover on the sermon page, so a moved listener does not have to leave the video to give.
A little styling makes it feel like part of the site instead of a browser default:
[popover] {
border: none;
border-radius: 12px;
padding: 1.5rem;
max-width: 22rem;
}
[popover]::backdrop {
background: rgba(20, 20, 25, 0.4);
}
Two honest cautions. An auto popover does not trap focus — the Tab key still walks out into the page behind, which is fine for a quick prompt but not for a form you do not want abandoned. If you need the page truly blocked, use the older <dialog> element with .showModal(). And the attribute does not do accessibility for you; give the popover a heading, connect it with aria-labelledby, and test the close path on iOS before you ship it.
The web platform quietly gave church sites a smaller, faster way to say "here is one more thing." A page that loads a little lighter is a small kindness to the visitor on cellular in the church parking lot.
If you would like unhurried eyes on the JavaScript your church site could quietly retire, we would be glad to look.