【Rails】Flashメッセージに「閉じるボタン」をつける

Flashメッセージはブラウザをリロードすれば消えますが、メッセージ横に×ボタンを設置してクリックしたらcloseできるようにしました。
アラートはBootstrap3のalert-infoとalert-dangerを使用して、若干cssを追加しています。

rails alert info

rails alert danger

レイアウトにアラートを設置する

レイアウト毎に共通して同じアラートを使う場合ですが、レイアウトのヘッダーの下部にアラートのパーシャルを読み込むようにしました。

app/views/layouts/application.html.erb

テンプレートの方は次の通りです。noticeかalertかで分岐しています。×ボタンはHTML-特殊文字を使用しています。

app/views/layouts/_alert.html.erb

スタイルシート

一応、今回加えたcssも載せておきます。

簡単ですが以上です!ご覧いただきありがとうございました!!😀


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp