38

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 again, I have to refresh page.

Currently if you render a bootstrap alert on the page, when you close it, the div container of the alert is gone from the page. So when you click the button again, it doesn't show up anymore. I have been doing the following on the close button to make it hide instead of delete the div container of alert.

<button class="close" onclick="$('#alertBox').hide();; return false;">×</button>

I wonder if using data-toggle or data-dismiss in bootstrap can make this sort of toggle effect working without going through my own custom Javascript handlers.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
ttback
  • 2,051
  • 5
  • 27
  • 40
  • 1
    how about considering a twitter-bootstrap collapse javascript instead of the alert javascript? – cboettig Jun 06 '12 at 01:29
  • Also see http://stackoverflow.com/questions/13550477/twitter-bootstrap-alert-message-close-and-open-again and http://stackoverflow.com/questions/20494887/my-bootstrap-alert-will-not-display-after-being-closed – Ohad Schneider Sep 19 '14 at 11:18

9 Answers9

54

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!

Darren Shewry
  • 10,179
  • 4
  • 50
  • 46
Ron
  • 22,128
  • 31
  • 108
  • 206
36

Actually you should consider using something like this :

$('#the-thing-that-opens-your-alert').click(function () {
  $('#le-alert').addClass('in'); // shows alert with Bootstrap CSS3 implem
});

$('.close').click(function () {
  $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

As bootstrap fade/in uses CSS3 instead of Jquery hide/show in full Javascript. My point is that on mobile devices, CSS3 is faster than Js.

And your HTML should looks like this:

<a id="the-thing-that-opens-your-alert" href="#">Open my alert</a>

<div id="le-alert" class="alert alert-warn alert-block fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Alert title</h4>
  <p>Roses are red, violets are blue...</p>
</div>

And this is pretty cool ! Check it in jsFiddle =)

Leiko
  • 954
  • 8
  • 10
  • @Leiko your jsfiddle helped me a lot,so +1 – SpringLearner Oct 21 '13 at 10:01
  • Based on above suggestion, I managed a working show/hide alert which you can see as a solution below. – jsa Jul 15 '18 at 17:13
  • 1
    this approach seems to occupy the space for the div regardless of whether the div is hidden or shown? Ideally the blank space would disappear too? – Black Aug 09 '18 at 13:10
3

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

user1661621
  • 797
  • 9
  • 15
2

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>
Bjorn
  • 298
  • 3
  • 5
1

You can add .hidden class to you alert and then toogle it. See: JSFiddle

HTML

<a id="show-my-alert" href="#">Show Alert</a>

<div id="my-alert" class="alert alert-warning hidden" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">    
        <span aria-hidden="true">&times;</span>
    </button> 
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

JavaScript

$("#show-my-alert, .close").click(function() {
    $("#my-alert").toggleClass("hidden");
});
Alexey
  • 7,127
  • 9
  • 57
  • 94
0

You can also try this:

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

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

});

It worked very nice for me.

user1321759
  • 1,734
  • 2
  • 14
  • 11
0

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

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

});

it's available for all element, included newly element

Bestafiko Borizqy
  • 21
  • 1
0

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

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>
jsa
  • 369
  • 2
  • 7