【Rails】Bootstrap + FontAwesome でモーダルウィンドウを作る

rails modale bootstrap font-awesome

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/

環境はこちらです

準備

必要なgemはこちらです。bootstrap3を使っていますが、bootstrap4でも大丈夫です。

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Views

viewはこのままでも、モーダルウィンドウは適用されています。

オプションの設定

あとはドキュメントにもあるようにオプションを設定していきます。本記事ではfont-awesomeも設置して、スタイルシートで調整しています。

スタイルシート

今回追加したスタイルシートを載せておきます。シンプルにするためにtitle部分をdisplay:noneにしています。

以上です!参考になれば幸いです!ご覧いただきありがとうございました!!😊


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。