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

Question

I have this element below that shows a success/failure banner across the screen. Is there a way I can set it in html/css to hide after 4 seconds?

 <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> 

I'm showing it by setting tempData in my controllers like this

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

Answer 1

You can use CSS animation and keyframes to accomplish your desired result.

  .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

You can use javascript setTimeout function on document ready event. Assuming you have jQuery included in the page,

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

You do not necessarily need jquery for this, With vanilla javascript, you wire up the code in onload event

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