CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstrap
chuckd
chuckd

Reputation: 14580

Showing a bootstrap alert message for a specific time in html and css

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!" };

Upvotes: 0

Views: 9096

Answers (2)

Bram G
Bram G

Reputation: 183

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>

Upvotes: 5

Shyju
Shyju

Reputation: 218792

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);
};

Upvotes: 3

Related Questions