Bootstrap Alert-dismissible未在Alert div中显示

Question

Here is my fiddle where I am trying to overlay a bootstrap alert on a bootstrap well on a click event, but the 'alert-dismissible' close box isn't showing! How can I get this to show and how do I hide the alert message when the alert-dismissible 'x' is clicked?

 $('.well').on('click', function() { $('.alert').show(); $('.alert').addcss('z-index: 1'); //.addClass('position: absolute'); }) 

 .well, .alert { position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="well">Text Inside A Well</div> <div style="display: none" class="alert alert-success alert-dismissible">Test</Div> 

Answer 1

1.you missed the below HTML in alert div .

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

2. addcss is not function. It should be css

Demo

3.The close button in above fiddle removes the alert div from DOM. If you want reuse the div then check this fiddle

Answer 2

The following code works for me without javascript / jQuery :

<div class="well">Text Inside A Well
<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>Test</div>
</div>