在 html 和 css 中显示特定时间的引导警报消息

Question

我在下面有这个元素，它在屏幕上显示成功/失败横幅。 有没有办法可以在 html/css 中设置它在 4 秒后隐藏？

<div id=mainAlertMessage class="alert @message.CssClassName alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div style="text-align: center"><strong>@message.Title</strong> @message.Message</div>
</div>

我通过像这样在我的控制器中设置 tempData 来显示它

TempData["UserMessage"] = new BannerMessage() { CssClassName = "alert-success", Title = "Success!", Message = "Notification settings were updated!" };

Answer 1

您可以使用 CSS 动画和关键帧来完成您想要的结果。

    .alert {
        animation: autoHide 0s ease-in 4s forwards;
    }

    @keyframes autoHide {
        to {
            width:0;
            height:0;
            overflow:hidden;
        }

<div id=mainAlertMessage class="alert @message.CssClassName alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <div style="text-align: center"><strong>@message.Title</strong> @message.Message</div>
</div>

Answer 2

您可以在文档就绪事件上使用 javascript setTimeout 函数。假设页面中包含 jQuery，

$(function () { 
    var duration = 4000; // 4 seconds
    setTimeout(function () { $('#mainAlertMessage').hide(); }, duration);
});

您不一定需要 jquery，使用 vanilla javascript，您可以在 onload event 中连接代码

window.onload = function() {
    var duration = 2000; //2 seconds
    setTimeout(function () { $('#mainAlertMessage').hide(); }, duration);
};