CODEWITHSUNDEEP
jqueryhtmltwitter-bootstraptwitter-bootstrap-3bootstrap-modal
S M Abrar Jahin
S M Abrar Jahin

Reputation: 14588

Bootstrap 3 Alert - Show with jQuery or JS

I have a Bootstrap 3 alert div like it

        <div class="alert" style="background-color:#9FF781;">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Done</strong> Deleted Successfully.
        </div>

And I am getting output like this-

enter image description here

But the problem is it is visible from the time of page loading and when I click on the close button, it disappears.

I like it will disappears at first and will come to front with a JS call.

So, how can I make it visible from the first.

And how can I restore it with JS or jQuery.

Is there any way?

Please help.

Upvotes: 4

Views: 3965

Answers (1)

J Santosh
J Santosh

Reputation: 3847

Bootstrap Alert Docs

You have to use hide or show (jQuery Methods) to hide or show alert div.

Check this

$('#toggleAlert').click(function() {
  $('.alert').toggle()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<div class="alert alert-success alert-dismissible" style='display:none;'>Test
  <button data-dismiss="alert" type="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<input type="button" id="toggleAlert" value="Toggle Alert" />

Note: The close button in the alert, If you click on that, the Bootstrap removes the alert div from DOM. So if you want to show the alert again, then use a button to toggle the div without using close button in alert.

Upvotes: 2

Related Questions