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

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

rails alert info

rails alert danger

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

app/views/layouts/application.html.erb

<!DOCTYPE html>

<html>

<head>

<title>Remonote</title>

<%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

</head>

<body>

<%= render 'layouts/header' %>

<%= render 'layouts/alert' %>

<%= yield %>

</body>

</html>

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

app/views/layouts/_alert.html.erb

<% if notice %>

</div>

<% elsif alert %>

</div>

<% end %>

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

.alert {

text-align: center;

}

.alert-info {

background-color: #bde9ff;

border-color: #bde9ff;

color: #4c6977;

}

.alert-danger {

background-color: #f3c0c0;

border-color: #f3c0c0;

color: #3e3a3a;

}

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

投稿者: