How to toggle a bootstrap alert on and off with button click?

Question

I want to display an alert box multiple times with a button click event without having to refresh the page but the alert box only shows up once. If I want to show the alert box

Answer 1

You can also try this:

$("#MyBtn").click(function() {

    if($("#MyAlrt").is(":visible")){
        $("#MyAlrt").hide();
    }else{
        $("#MyAlrt").show();
    }

});

It worked very nice for me.

Answer 2

I just used a model variable to show/hide the dialog and removed the data-dismiss="alert"

eg

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria- hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

works for me and stops the need to go out to jquery

Answer 3

I used the following working approach based on Leiko's solution.

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Html body contains below alert

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>

Answer 4

You don't need to use jquery to accomplish this, here's a bootstrap-only solution.

The on/off button:

<button type="button" class="btn" data-toggle="collapse" href="#my-alert-box">
   <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</button>

The alert with a close button that hides the alert (same as clicking the show/hide button):

<div id="my-alert-box" class="alert alert-info collapse" role="alert">
   <button type="button" class="close" data-toggle="collapse" href="#my-alert-box">
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
   </button>
   <p>Look, here's a show/hide alert box without jquery...</p>
</div>

Answer 5

To show/ hide you could do this like in the accepted answer:

I've had the same problem: just don't use the data-dismiss from the close button and work with JQuery show() and hide():

$('.close').click(function() {
$('.alert').hide();
  })

Now you can show the alert when clicking a button by using the code:

$('.alert').show()

Hope this helps!

Or what Was trying to do was make a colapsable alert that would colapse the alert and still show the header for example. i did this so i could make it position:fixed; and then show the other content content. However this was hard to do so i created a work around. When you click the dismiss button it would set the popup display:none; and then at first when its at the top you may need to prevent it from initially covering content so i added line breaks that would show/hide in acordance with the display of the Alert. so 2 alerts that one when you click the dismiss, display:none; and then show the other popup that has just a single line of content. when this popup was clicked it would set the main alert to display:block; as well as the line breaks in acoridance. Here is the code, now that the explenation is done:

function ShowALERT() { 
  document.getElementById('ALERT').style.display = "block";
	document.getElementById('ShowALERT').style.display = "none";
	document.getElementById('breakShowALERT').style.display = "none";
	document.getElementById('breakALERT').style.display = "block";
	
}
function closeALERT() { 
   document.getElementById('ALERT').style.display = "none";
document.getElementById('breakShowALERT').style.display = "block";
  document.getElementById('ShowALERT').style.display = "block";
document.getElementById('breakALERT').style.display = "none";
	
}

#ALERT {
	position:fixed;
	display:block;
	width:100%;
	z-index:1;
	left:0px;
	top:0px;
	
	}
  #ShowALERT {
position: fixed;
display:none;
z-index:1;
top:0px;
left:0px;
width: 100%;
}
#breakShowALERT {
display:none;
}
	#breakALERT {
display:block;
}

<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
    <button id="ShowALERT"  onclick="ShowALERT()" class="bg-primary"> 

	  <h5> <b>Important Alert</b></h5>
</button>
</div>
<div class=container>
   <div id="ALERT" class="alert bg-primary alert-dismissable">
 <a href="#" class="close" onclick="closeALERT()" aria-label="close">Dismiss</a>
 <h5><b>Note:</b> Alert Content here......................</h5>
</div>
 </div>
 <body>
 <div id='breakALERT'><br><br><br><br><br></div>
					<div id='breakShowALERT'><br><br></div>
 <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
 </body>

Answer 6

$(document).on('click', '.close', function() {

   $('.alert').hide();

});

it's available for all element, included newly element