0

ポップアップして数秒後に消える通知を作成しようとしていますが、ユーザーがマウスでホバーして消えないようにしたいです。できれば、クリックして消すこともできますが、それは必須ではありません。タイムアウトを停止するために、html のホバーを埋め込まれたルビーと対話させる方法がわかりません。私はそれを機能させるために全体を再構築する必要があるかもしれないことを知っています。関連する css と html/erb のスニペットは次のとおりです (実行するには不十分です)。

setTimeout(function() {
  $('#alert_box').fadeOut('fast');
}, 3000);
.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  justify-self: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<% unless notice == nil %>
<div id="alert_box" class="alert_wrap">
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
</div>
<% end %>

4

3 に答える 3

1

CSS アニメーションでアプローチできます。

.alert_wrap {
  padding: 0px 50px;
  margin-top: 3px;
  height: 5%;
  background-color: rgba(255, 0, 0, .3);
  border: 3px solid red;
  grid-row-start: 2;
  animation: alert 4s linear none;
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes alert {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
}

.alert_wrap:hover {
  opacity: 1;
}
<div class="alert_wrap">
  <p>Some alert</p>
</div>

于 2017-09-27T08:57:42.147 に答える
0

このようなものも機能する可能性がありますが、おそらく CSS トランジションでこれを行うでしょう (ここでも :not(:hover) 疑似セレクターを使用します)。

var handler = setInterval(hideBox, 100); // interval function

function hideBox() {
  if ($('.alert_wrap:not(:hover)').length) { // check if the alert is visible and not hovered
    setTimeout(function() { // after 3 seconds
      if ($('.alert_wrap:not(:hover)').length) { // if not hovered yet
        $('.alert_wrap:not(:hover)').fadeOut('fast');
        clearInterval(handler);
        handler = 0;
      }
    }, 3000);    
  }
}

于 2017-09-27T09:01:43.860 に答える