[英]Showing a bootstrap alert message for a specific time in html and css
我下面有一个在屏幕上显示成功/失败标语的元素。 有没有办法我可以在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">×</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!" };
您可以使用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">×</span></button> <div style="text-align: center"><strong>@message.Title</strong> @message.Message</div> </div>
您可以对文档就绪事件使用javascript setTimeout
函数。 假设页面中包含jQuery,
$(function () {
var duration = 4000; // 4 seconds
setTimeout(function () { $('#mainAlertMessage').hide(); }, duration);
});
您不必为此使用jquery,使用香草javascript,您可以在onload
事件中连接代码
window.onload = function() {
var duration = 2000; //2 seconds
setTimeout(function () { $('#mainAlertMessage').hide(); }, duration);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.