How to use twitter bootstrap 3.1.1 modals

I’ve seen a lot of examples of modals. But they work perfectly only with bootstrap 2 ( css files) When I use it with bootstrap 3.1.1 css files . It doesn’t works.

<div class="container">
  <h2>Example of creating Modals with Twitter Bootstrap</h2>
  <div id="example" class="modal hide fade in" style="display: none; ">
       <div class="modal-header">
           <a class="close" data-dismiss="modal">×</a>
           <h3>This is a Modal Heading</h3>
       </div>
       <div class="modal-body">
           <h4>Text in a modal</h4>
           <p>You can add some text here.</p>
       </div>
       <div class="modal-footer">
           <a href="#" class="btn btn-success">Call to action</a>
           <a href="#" class="btn" data-dismiss="modal">Close</a>
       </div>
  </div>
  <p>
      <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a>
  </p>
</div>

solution

According to Bootstrap 3 documentation, you need to structure your HTML like this:

EXAMPLE HERE

<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
         <a class="close" data-dismiss="modal">×</a>
         <h3>This is a Modal Heading</h3>
     </div>
     <div class="modal-body">
         <h4>Text in a modal</h4>
         <p>You can add some text here.</p>
     </div>
     <div class="modal-footer">
         <a href="#" class="btn btn-success">Call to action</a>
         <a href="#" class="btn" data-dismiss="modal">Close</a>
     </div>
    </div>
  </div>
</div>