diff --git a/app/views/application/_flash.html.slim b/app/views/application/_flash.html.slim
index a391ee23..cbb88634 100644
--- a/app/views/application/_flash.html.slim
+++ b/app/views/application/_flash.html.slim
@@ -1,3 +1,5 @@
-#flash.fixed_error_messages.clickthrough data-message-failure=t('shared.message_failure')
+#flash.fixed_error_messages data-message-failure=t('shared.message_failure')
- %w[alert danger info notice success warning].each do |severity|
- p.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}" id="flash-#{severity}" = flash[severity]
+ div.alert.flash class="alert-#{{'alert' => 'warning', 'notice' => 'success'}.fetch(severity, severity)}" id="flash-#{severity}"
+ p = flash[severity]
+ span.fa.fa-times
\ No newline at end of file
diff --git a/lib/assets/javascripts/flash.js b/lib/assets/javascripts/flash.js
index cd5cb72d..fa79e71d 100644
--- a/lib/assets/javascripts/flash.js
+++ b/lib/assets/javascripts/flash.js
@@ -24,11 +24,25 @@
var showFlashes = function() {
$('.flash').each(function() {
- if ($(this).html() !== '') {
- $(this).slideDown().delay(DURATION).slideUp(function() {
- $(this).html('');
+ var container = $(this);
+ var message = container.children().first();
+ var button = container.children().last();
+
+ var hide = function() {
+ container.slideUp(function () {
+ message.html('');
});
+ };
+
+ if (message.html() !== '') {
+ container.slideDown();
+ container.animation = setTimeout(hide, DURATION);
}
+
+ button.on('click', function () {
+ clearTimeout(container.animation);
+ hide();
+ });
});
};
diff --git a/lib/assets/stylesheets/flash.css.scss b/lib/assets/stylesheets/flash.css.scss
index 661526e8..df52993a 100644
--- a/lib/assets/stylesheets/flash.css.scss
+++ b/lib/assets/stylesheets/flash.css.scss
@@ -1,5 +1,12 @@
.flash {
display: none;
+
+ span.fa-times {
+ position: relative;
+ top: -1.2em;
+ float: right;
+ cursor: pointer;
+ }
}
.fixed_error_messages {
@@ -13,14 +20,4 @@
padding-top: 0;
}
-.clickthrough {
- pointer-events: none;
-
- /* fixes for IE */
- /*
- background:white;
- opacity:0;
- filter:Alpha(opacity=0);
- */
-}