Babiker
Babiker

Reputation: 18798

Bootstrap modal not showing

For some reason I am having trouble firing a bootstrap modal, below is my code.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <link href="http://localhost/scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      </head>
      <body>
        <div id="modal" class="modal hide fade">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Modal header</h3>
              </div>
              <div class="modal-body">
                <p>One fine body…</p>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
              </div>
            </div>
            <button id="button">Fire</button>
        <script src="http://localhost/scripts/bootstrap/js/bootstrap.min.js"></script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
          $(function(){
             $("#button").click(function(){
                $('#modal').modal('show');
             });
          });
        </script>
      </body>
    </html>

Upvotes: 1

Views: 2784

Answers (1)

Ian
Ian

Reputation: 50905

You have to include the bootstrap library after the jQuery library. Did you bother checking your browser's console for any errors?

Upvotes: 3

Related Questions