Twitter Bootstrap alert message close and open again

Question

I have a problem with alert messages  It is displayed normally  and I can close it when the user presses x  close   but when the user tries to display it again  for example  click on the button event  then it is not shown   Moreover  if I print this alert message to console  it is equal to      My code is here     lt div class  alert  style  display  none  gt      lt a class  close  data-dismiss  alert  gt    lt  a gt      lt strong gt Warning  lt  strong gt  Best check yo self  you re not looking too good    lt  div gt    And event        alert   show      P S  I need to show alert message only after some event happened  for example  button clicked   Or what I am doing wrong

User · Answer

All of the above solutions use external libraries, either angular or jQuery, and an old version of Bootstrap. So, here is Charles Wyke-Smith's solution in pure JavaScript, applied to Bootstrap 4. Yes, Bootstrap requires jQuery for its own modal and alerts code, but not everyone writes their own code with jQuery any more.

Here is the html of the alert:

<div id="myAlert" style="display: none;" 
    class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-hide="alert">&times;</button>
    <strong>Success!</strong> You did it!
</div>

Note that initially the alert is hidden (style="display: none;"), and instead of the standard data-dismiss="alert", we have here used data-hide="alert".

Here is the JavaScript to show the alert and override the close button:

var myAlert = document.getElementById('myAlert');
// Show the alert box
myAlert.style.display = 'block';
// Override Bootstrap's standard close action
myAlert.querySelector('button[data-hide]').addEventListener('click', function() {
    myAlert.style.display = 'none';
});

If you wish to hide or show the alert programmatically elsewhere in the code, just do myAlert.style.display = 'none'; or myAlert.style.display = 'block';.

User · Answer

I agree with the answer posted by Henrik Karlsson and edited by Martin Prikryl   I have one suggestion  based on accessibility   I would add  attr  aria-hidden    true   to the end of it  so that it looks like     this  closest         this  attr  data-hide    attr  aria-hidden    true

User · Answer

If you re using an MVVM library such as knockout js  which I highly recommend  you can do it more cleanly    lt div class  alert alert-info alert-dismissible  data-bind  visible showAlert  gt      lt button type  button  class  close  data-bind  click function   showAlert false    gt           lt span aria-hidden  true  gt  amp times  lt  span gt           lt span class  sr-only  gt Close lt  span gt      lt  button gt     Warning  Better check yourself  you re not looking too good   lt  div gt    http   jsfiddle net bce9gsav 5

User · Answer

I just used a model variable to show hide the dialog and removed the data-dismiss  alert   Example    lt div data-ng-show  vm result     error   class  alert alert-danger alert-dismissable  gt       lt button type  button  class  close  data-ng-click  vm result   null  aria-hidden  true  gt  amp times  lt  button gt       lt strong gt Error      lt  strong gt   vm exception    lt  div gt    works for me and stops the need to go out to jquery

User · Answer

This worked for me best       alert   on  close bs alert   function  e        e preventDefault          this  hide

User · Answer

Data-dismiss completely removes the element  Use jQuery s  hide   method instead   The fix-it-quick method   Using inline javascript to hide the element onclick like this    lt div class  alert  style  display  none  gt        lt a class  close  onclick      alert   hide    gt    lt  a gt         lt strong gt Warning  lt  strong gt  Best check yo self  you re not looking too good     lt  div gt    lt a href     onclick     alert   show    gt show lt  a gt    http   jsfiddle net cQNFL   This should however only be used if you are lazy  which is no good thing if you want an maintainable app    The do-it-right method   Create a new data attribute for hiding an element   Javascript     function            data-hide    on  click   function                      this  attr  data-hide    hide              -or-  see below              this  closest         this  attr  data-hide    hide               and then change data-dismiss to data-hide in the markup  Example at jsfiddle             this  attr  data-hide    hide     This will hide all elements with the class specified in data-hide  i e  data-hide  alert  will hide all elements with the alert class   Xeon06 provided an alternative solution     this  closest         this  attr  data-hide    hide     This will only hide the closest parent element  This is very useful if you don t want to give each alert a unique class  Please note that  however  you need to place the close button within the alert   Definition of  closest from jquery doc      For each element in the set  get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree

User · Answer

I ve tried all the methods and the best way for me is to use the built-in bootstrap classes   fade and  in  Example    lt div class  alert alert-danger fade  lt  php echo   show     in         gt   role  alert  gt     lt  div gt    Note  In jQuery  addClass  in   to show the alert  removeClass  in   to hide it   Fun fact  This works for all elements  Not just alerts

User · Answer

I think a good approach to this problem would be to take advantage of Bootstrap s close bs alert event type to hide the alert instead of removing it  The reason why Bootstrap exposes this event type is so that you can overwrite the default behavior of removing the alert from the DOM       alert   on  close bs alert   function  e        e preventDefault          this  addClass  hidden

User · Answer

I ran into this problem as well and the the problem with simply hacking the close-button is that I still need access to the standard bootstrap alert-close events   My solution was to write a small  customisable  jquery plugin that injects a properly formed Bootstrap 3 alert  with or without close button as you need it  with a minimum of fuss and allows you to easily regenerate it after the box is closed   See https   github com davesag jquery-bs3Alert for usage  tests  and examples

User · Answer

Can this not be done simply by adding a additional  container  div and adding the removed alert div back into it each time  Seems to work for me   HTML   lt div id  alert container  gt  lt  div gt    JS       alert container   html   lt div id  alert  gt  lt  div gt                    alert   addClass  alert alert-info  alert-dismissible         alert   html   lt a href     class  close  data-dismiss  alert  aria-label  close  gt  amp times  lt  a gt  lt strong gt Info  lt  strong gt message

User · Answer

So if you want a solution that can cope with dynamic html pages  as you already include it you should use jQuery s live to set the handler on all elements that are now and in future in the dom or get removed   I use   x000D   x000D    document  on  click     data-hide-closest    function e    x000D    e preventDefault    x000D    var  this     this   x000D     this closest  this attr  data-hide-closest    hide    x000D      x000D   alert-success   x000D      background-color   dff0d8  x000D      border-color   d6e9c6  x000D      color   3c763d  x000D    x000D   alert   x000D      border  1px solid transparent  x000D      border-radius  4px  x000D      margin-bottom  20px  x000D      padding  15px  x000D    x000D   close   x000D      color   000  x000D      float  right  x000D      font-size  21px  x000D      font-weight  bold  x000D      line-height  1  x000D      opacity  0 2  x000D      text-shadow  0 1px 0  fff  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  alert alert-success  gt  x000D     lt a class  close  data-hide-closest   alert  gt    lt  a gt  x000D     lt strong gt Success  lt  strong gt  Your entries were saved  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Based on the other answers and changing data-dismiss to data-hide  this example handles opening the alert from a link and allows the alert to be opened and closed repeatedly     a show alert   click function         var  theAlert       my alert       class on the alert         theAlert css  display   block          set up the close event when the alert opens     theAlert find  a data-hide    click function            this  parent   hide       hide the alert

User · Answer

There s a very simple way to do this using JQuery If you delete data-dismiss  quot alert quot  from the alert div  you can just hide the alert using the x button  by adding a click events and interacting with the display css attribute of the alert     quot  close quot   click function         this  parent   css  quot display quot    quot none quot         Then  whenever you need it again  you can toggle the display attribute again  Full Example   lt div class  quot alert alert-danger quot  role  quot alert quot  id  quot my alert quot  style  quot display  none  quot  gt     Uh Oh    Something went wrong    lt button type  quot button quot  class  quot close quot  aria-label  quot Close quot  gt        lt span aria-hidden  quot true quot  gt  amp times  lt  span gt     lt  button gt   lt  div gt    lt script gt        quot  close quot   click function            this  parent   css  quot display quot    quot none quot                 Use whatever event you like       quot  show alert quot   click function             quot  my alert  css  quot display quot    quot inherit quot            lt script gt

User · Answer

Here is a solution based on the answer by Henrik Karlsson but with proper event triggering  based on Bootstrap sources      function            data-hide    on  click   function    alert hide e            var  this     this          var selector    this attr  data-target           if   selector                selector    this attr  href               selector   selector  amp  amp  selector replace           s              strip for ie7                    var  parent     selector                selector           if    parent length                 parent    this closest   alert                       parent trigger e     Event  close bs alert             if  e isDefaultPrevented    return           parent hide             parent trigger   Event  closed bs alert                 The answer mostly for me  as a note

User · Answer

The problem is caused by using the style  display none   you should hide the alert with Javascript or at least when showing it  remove the style attribute

[javascript] Twitter Bootstrap alert message close and open again

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to alert