Railsでは link_to メソッドの引数に data: {confirm: ‘メッセージ’ } と指定するだけで、簡単に確認ダイアログを表示する仕組みが用意されていますが、さらにbootstrapのdata-confirm modalを使うことで使い勝手の良いモーダルウィンドウを作ることができます。
背景のオーバーレイをクリックすると、モーダルウィンドウを閉じれるのもうれしいです。あとは好みによりますが、本記事ではfont-awesomeも設置しています。
Data-Confirm Modal
https://github.com/ifad/data-confirm-modal
FontAwesome
https://fontawesome.com/
環境はこちらです
|
1 2 |
ruby 2.5.1 rails 5.1.6 |
準備
必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。
Gemfile
|
1 2 3 4 |
gem 'data-confirm-modal' gem 'jquery-rails' gem 'bootstrap-sass' gem "font-awesome-rails" |
app/assets/javascripts/application.js
|
1 2 |
// = require data-confirm-modal //= require bootstrap-sprockets |
app/assets/stylesheets/application.css.scss
|
1 2 3 4 5 6 7 |
* *= require font-awesome *= require_tree . *= require_self */ @import "bootstrap-sprockets"; //bootstrap4の場合は不要です @import "bootstrap"; |
Views
viewはこのままでも、モーダルウィンドウは適用されています。
|
1 |
<%= link_to 'Destroy', article, method: :delete, data: { confirm: 'Are you sure?' } %> |
オプションの設定
あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。
|
1 2 3 4 5 |
<%= link_to 'Destroy', article, method: :delete, data: {confirm: "<i class='fa fa-exclamation-circle'></i> 本当に「<strong>#{article.title}</strong>」を削除しますか?", cancel: "キャンセル", commit: "削除"} %> |
スタイルシート
今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.modal-dialog { .modal-header { border-bottom: none; text-align: center; padding: 5px; background-color: #fbe41c; border-top-right-radius: 5px; border-top-left-radius: 5px; } .modal-title, button.close { display: none; } .modal-body { text-align: center; font-size: 20px; padding: 30px 0 5px; } .fa-exclamation-circle:before { color: #fbe41c; font-size: 40px; padding: 5px; position: relative; top: 5px; } .modal-footer { border-top: none; } .btn-danger { background-color: #f97773; border-color: #f97773; } } |
以上です！参考になれば幸いです！ご覧いただきありがとうございました！！😊
