Dynamically create Bootstrap alerts box through JavaScript

Question

I m using Bootstrap 2 0 for my project and I would like to dynamically add Bootstrap alert box in my page  http   twitter github com bootstrap javascript html alerts   I want to do something like   bootstrap-alert warning  Invalid Credentials

User · Accepted Answer

Try this  see a working example of this code in jsfiddle  http   jsfiddle net periklis 7ATLS 1     lt input type    button  id    clickme  value  Click me    gt   lt div id    alert placeholder  gt  lt  div gt   lt script gt  bootstrap alert   function      bootstrap alert warning   function message                    alert placeholder   html   lt div class  alert  gt  lt a class  close  data-dismiss  alert  gt    lt  a gt  lt span gt   message   lt  span gt  lt  div gt                   clickme   on  click   function                 bootstrap alert warning  Your text goes here         lt  script gt     EDIT  There are now libraries that simplify and streamline this process  such as bootbox js

User · Answer

I found that AlertifyJS is a better alternative and have a Bootstrap theme   alertify alert  Alert Title    Alert Message    function    alertify success  Ok          Also have a 4 components  Alert  Confirm  Prompt and Notifier   Exmaple  JSFiddle

User · Answer

Found this today  made a few tweaks and combined the features of the other answers while updating it to bootstrap 3 x   NB  This answer requires jQuery   In html    lt div id  form errors  class  alert alert-danger fade in  style  display none  gt    In JS    lt script gt    http   stackoverflow com questions 10082330 dynamically-create-bootstrap-alerts-box-through-javascript function bootstrap alert elem  message  timeout        elem  show   html   lt div class  alert  gt  lt button type  button  class  close  data-dismiss  alert  aria-hidden  true  gt  amp times  lt  button gt  lt span gt   message   lt  span gt  lt  div gt        if  timeout    timeout     0        setTimeout function              elem  alert  close           timeout               lt  script gt     Then you can invoke this either as   bootstrap alert   form errors    This message will fade out in 1 second   1000  bootstrap alert   form errors    User must dismiss this message manually

User · Answer

just recap    x000D   x000D    document  ready function     x000D   x000D         button   on   click   function     x000D   x000D        showAlert   OK    alert-success     x000D   x000D           x000D   x000D      x000D   x000D  function showAlert  message  alerttype     x000D   x000D          alert placeholder   append      alert placeholder   append  x000D          lt div id  alertdiv  class  alert alert-dismissible fade in      alerttype      gt     x000D              lt a class  close  data-dismiss  alert  aria-label  close   gt    lt  a gt     x000D              lt span gt     message     lt  span gt      x000D          lt  div gt     x000D         x000D   x000D         close it in 3 secs x000D      setTimeout  function     x000D              alertdiv   remove    x000D         3000    x000D   x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 4 0 css bootstrap min css    gt  x000D   x000D   lt script  src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 4 0 js bootstrap min js  gt  lt  script gt  x000D           x000D   lt button onClick     gt Show Alert lt  button gt  x000D         x000D   lt div id  alert placeholder  class  container   gt  lt  div gt  x000D   x000D   x000D    codepen

User · Answer

You can also create a HTML alert template like this    lt div class  alert alert-info  id  alert template  style  display  none   gt       lt button type  button  class  close  gt    lt  button gt   lt  div gt    And so you can do in JavaScript this here       alert template button   after   lt span gt Some text lt  span gt         alert template   fadeIn  slow      Which is in my opinion cleaner and faster  In addition you stick to Twitter Bootstrap standards when calling fadeIn     To guarantee that this alert template works also with multiple calls  so it doesn t add the new message to the old one   add this here to your JavaScript       alert template  close   click function e            alert template span   remove          So this call removes the span element every time you close the alert via the x-button

User · Answer

I ended up using toastr  https   github com CodeSeven toastr  with style modifications  Make toastr alerts look like bootstrap alerts

User · Answer

Bootstrap Alerts -   Function Name - showalert     Inputs - message alerttype   Example - showalert  Invalid Login   alert-error     Types of alerts --  alert-error   alert-success   alert-info   alert-warning    Required - You only need to add a alert placeholder div in your html page wherever you want to display these alerts   lt div id  alert placeholder  gt  lt  div gt     Written On - 14-Jun-2013        function showalert message alerttype             alert placeholder   append   lt div id  alertdiv  class  alert      alerttype      gt  lt a class  close  data-dismiss  alert  gt    lt  a gt  lt span gt   message   lt  span gt  lt  div gt         setTimeout function        this will automatically close the alert and remove this if the users doesnt close it in 5 secs             alertdiv   remove            5000

User · Answer

function bootstrap alert             create   function  message  color                    alert placeholder                    html   lt div class  alert alert-    color                          role  alert  gt  lt a class  close  data-dismiss  alert  gt    lt  a gt  lt span gt     message                         lt  span gt  lt  div gt                        warning   function  message                create message   warning                       info   function  message                create message   info                       light   function  message                create message   light                       transparent   function  message                create message   transparent                       return               warning  warning              info  info              light  light              transparent  transparent

User · Answer

I created this VERY SIMPLE and basic plugin    function           fn extend           bs alert  function message  title               var cls  alert-danger               var html   lt div class  alert   cls   alert-dismissable  gt  lt button type  button  class  close  data-dismiss  alert  aria-hidden  true  gt  amp times  lt  button gt                if typeof title    undefined   amp  amp   title                        html    lt h4 gt   title   lt  h4 gt                              html    lt span gt   message   lt  span gt  lt  div gt                  this  html html                      bs warning  function message  title               var cls  alert-warning               var html   lt div class  alert   cls   alert-dismissable  gt  lt button type  button  class  close  data-dismiss  alert  aria-hidden  true  gt  amp times  lt  button gt                if typeof title    undefined   amp  amp   title                        html    lt h4 gt   title   lt  h4 gt                              html    lt span gt   message   lt  span gt  lt  div gt                  this  html html                      bs info  function message  title               var cls  alert-info               var html   lt div class  alert   cls   alert-dismissable  gt  lt button type  button  class  close  data-dismiss  alert  aria-hidden  true  gt  amp times  lt  button gt                if typeof title    undefined   amp  amp   title                        html    lt h4 gt   title   lt  h4 gt                              html    lt span gt   message   lt  span gt  lt  div gt                  this  html html                        jQuery     Usage is   lt div id  error container  gt  lt  div gt   lt script gt      error container   bs alert  YOUR ERROR MESSAGE HERE       title     lt  script gt    first plugin EVER and it can be easily made better

User · Answer

FWIW I created a JavaScript class that can be used at run-time  It s over on GitHub  here   There is a readme there with a more in-depth explanation  but I ll do a quick example below   var ba   new BootstrapAlert    ba addP  Some content here       body   append ba render       The above would create a simple primary alert with a paragraph element inside containing the text  Some content here    There are also options that can be set on initialisation  For your requirement you d do   var ba   new BootstrapAlert       dismissible  true      background   warning      ba addP  Invalid Credentials       body   append ba render       The render method will return an HTML element  which can then be inserted into the DOM  In this case  we append it to the bottom of the body tag   This is a work in progress library  but it still is in a very good working order

[javascript] Dynamically create Bootstrap alerts box through JavaScript

Examples related to javascript

Examples related to twitter-bootstrap