rails에서 data: {confirm: "本当に削除しますか？"}를 지정하면 Chrome의 경우 이러한 느낌 확인 대화 상자가 표시됩니다.


이것에 github 같은 확인 대화 상자를 쉽게 적용하는 방법입니다.

bootstrap 적용

원래 bootstrap을 사용할 수 없으면 안되기 때문에 bootstrap-rails gem을 사용합니다.

gemfile

gem 'bootstrap-sass'

$ bundle install

application.css 를 application.css.scss 로 이름을 바꿉니다.

app/assets/stylesheets/application.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

또는

아래 코드를 application.html.erb의 head 태그 안에 삽입하면 됩니다.
Bootstrap CDN

app/views/layouts/application.html.erb

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

gem의 data-confirm-modal 적용

확인 대화 상자에 bootstrap을 적용하는 gem을 설정합니다.

gemfile

gem 'data-confirm-modal'

$ bundle install

app/assets/javascripts/application.js

// = require data-confirm-modal

application계의 파일을 편집했으므로, 서버 재기동을 합시다.

# ctrl + c
$ rails s

view 설정

view에서 설정합니다. 라고 할지 아무것도 설정하지 않아도 적용됩니다!

<%= link_to 'Delete', product, method: :delete, data: {confirm: 'Are you sure?'} %>

옵션

title에서 확인 대화 상자의 제목 문자열을 지정할 수 있습니다.
cancel에서는 취소 버튼의 문자열을 지정할 수 있습니다.
commit에서는 삭제 버튼의 문자열을 지정할 수 있습니다.
varify와 varify_text에서 github처럼 varify_text로 삭제하기 위한 조건문의 기재, 삭제하는 경우에는 varify로 지정한 문자열을 입력하지 않으면 삭제할 수 없는 설정을 할 수 있습니다.

hoge.html.erb

<%= link_to 'destroy', product, method: :delete, data:
   { confirm: "本当に<strong>#{product.title}</strong>を削除してよろしいですか？",
　   verify: "#{product.title}",
　   verify_text: "削除する場合は商品名を入力してください",
　   cancel: "やめる",
　   commit: "削除する"}, title: "削除の確認" %>

이것만으로 설정할 수 있다니 간단하네요!