--- title: Replace Turbo confirm with native dialog | daily.dev description: Learn how to replace Rails' basic turbo_confirm dialogs with native HTML dialog elements for better design control. The approach uses Attractive.js to handle... canonical: https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Replace Turbo confirm with native dialog | daily.dev og:description: Learn how to replace Rails' basic turbo_confirm dialogs with native HTML dialog elements for better design control. The approach uses Attractive.js to handle... og:url: https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw og:image: https://api.daily.dev/og/posts/dBxxvM0lw.png og:image:alt: Replace Turbo confirm with native dialog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Replace Turbo confirm with native dialog **[RUBYLAND](https://daily.dev/sources/rubyla)** · 3 min read · 1 upvotes · 0 comments ## Summary Learn how to replace Rails' basic turbo_confirm dialogs with native HTML dialog elements for better design control. The approach uses Attractive.js to handle dialog interactions without custom JavaScript, allowing you to add formatting, context, and styling while maintaining simplicity. The tutorial covers removing turbo_confirm attributes, implementing dialog elements with unique IDs, and styling with modern CSS features like @starting-style. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Stop Using Ugly Browser Alerts: Custom Turbo Confirms in Rails 8](https://daily.dev/posts/stop-using-ugly-browser-alerts-custom-turbo-confirms-in-rails-8-8tjqpeepd) · Ruby Flow · 0 upvotes · 0 comments - [Beautiful Rails confirmation dialogs \(with zero JavaScript\)](https://daily.dev/posts/beautiful-rails-confirmation-dialogs-with-zero-javascript--mdkganzyp) · RUBYLAND · 0 upvotes · 0 comments - [Use native dialog with Turbo \(and no extra JavaScript\)](https://daily.dev/posts/use-native-dialog-with-turbo-and-no-extra-javascript--hb1a0azww) · RUBYLAND · 0 upvotes · 0 comments - [Confirmation dialogs with zero JavaScript](https://daily.dev/posts/confirmation-dialogs-with-zero-javascript-kdvyvhvms) · RUBYLAND · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#rails](https://daily.dev/tags/rails) [View this post on daily.dev](https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Replace Turbo confirm with native dialog","url":"https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw"},"datePublished":"2026-02-05T10:31:04.146Z","dateModified":"2026-02-05T10:31:22.793Z","description":"Learn how to replace Rails' basic turbo_confirm dialogs with native HTML dialog elements for better design control. The approach uses Attractive.js to handle...","image":"https://railsdesigner.com/images/posts/post-delete-dialog.gif","thumbnailUrl":"https://railsdesigner.com/images/posts/post-delete-dialog.gif","isAccessibleForFree":true,"articleSection":"RUBYLAND","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"RUBYLAND","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/rubyla","url":"https://daily.dev/sources/rubyla"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/replace-turbo-confirm-with-native-dialog-dbxxvm0lw","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css,html,rails","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"RUBYLAND","item":"https://daily.dev/sources/rubyla"},{"@type":"ListItem","position":3,"name":"Replace Turbo confirm with native dialog"}]} ```