How to activate the Bootstrap modal-backdrop

Question

I want to put up an overlay on my screen while some ajax stuff is running   Building my own overlay div isn t a big deal  but  since I m already using Bootstrap  I figure I might as well use its  modal-backdrop -- it should already be around  and there s some value to consistency and all that     The problem is I can t find the right way to do it -- I ve tried adding classes to  modal-backdrop  or calling  show   on it  but it s not working     Note that I don t want to bring up a whole modal dialog  but just reveal and then hide the backdrop     Any suggestions

User · Answer

Pretty strange  it should work out of the box as the   modal-backdrop  class is defined top-level in the css    lt div class  modal-backdrop  gt  lt  div gt    Made a small demo  http   jsfiddle net PfBnq

User · Answer

Just append a div with that class to body  then remove it when you re done      Show the backdrop     lt div class  modal-backdrop  gt  lt  div gt    appendTo document body       Remove it  later      modal-backdrop   remove      Live Example    x000D   x000D     input   click function     x000D    var bd       lt div class  modal-backdrop  gt  lt  div gt     x000D    bd appendTo document body   x000D    setTimeout function     x000D      bd remove    x000D       2000   x000D      x000D   lt link href    netdna bootstrapcdn com twitter-bootstrap 2 3 2 css bootstrap-combined min css  rel  stylesheet  type  text css    gt  x000D   lt script src    code jquery com jquery min js  gt  lt  script gt  x000D   lt script src    netdna bootstrapcdn com twitter-bootstrap 2 3 2 js bootstrap min js  gt  lt  script gt  x000D   lt p gt Click the button to get the backdrop for two seconds  lt  p gt  x000D   lt input type  button  value  Click Me  gt  x000D   x000D   x000D

[jquery] How to activate the Bootstrap modal-backdrop?

Examples related to jquery

Examples related to twitter-bootstrap