Menu

Post image 1
Post image 2
Post image 3
1 / 3
0

Stop Using Ugly Browser Alerts: Custom Turbo Confirms in Rails 8

DEV Community·Zil Norvilis·about 1 month ago
#ariqW4C9
#rails#hotwire#frontend#dialog#turbo#confirm
Reading 0:00
15s threshold

I'm building a really nice, modern Rails application. I use Tailwind to make the buttons look great, I use Hotwire to make the page load instantly, and then... I click a "Delete" button. Suddenly, the screen freezes and a massive, ugly gray alert box from 1998 pops up saying "Are you sure?" This is the default browser window.confirm() dialog. It looks terrible, it breaks the modern feel of your app, and you cannot style it with CSS. For a long time, fixing this required writing a bunch of messy custom Javascript to intercept form submissions. But in modern Rails (using Turbo), overriding this behavior is actually incredibly simple. We can use a single Promise and the native HTML5 <dialog> element to create a beautiful, custom confirmation modal. Here is exactly how to do it in 3 easy steps. STEP 1: The Native HTML Dialog First off, we need the actual modal that will pop up. Instead of importing heavy JavaScript modal libraries, we are going to use the native HTML5 <dialog> element.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More