Bootstrap modal hide does not work

Hello good people of Daniweb :)

I am developing a site with codeigniter 1.2.2 and the latest version of bootstrap.

I am calling a modal window but the X and Close buttons don't close the window.

Tried alerting when clicking a button and I do get the alert but the window stays open.

Can someone please help?

My page source:

<html>
<head>
    <meta charset="UTF-8">
    <title>thinklocal: thinklocal</title>
    <!-- Bootstrap -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://localhost/thinklocal/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://localhost/thinklocal/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://localhost/thinklocal/css/styles.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://localhost/thinklocal/js/bootstrap.min.js"></script>
<script>
        $(function() {
                             $('.btn').click(function() { alert('h');
                                $('#myModal').modal('hide');
                             });
                             });
        </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>  
    <body style="background: #555;">
        <div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h2 id="myModalLabel">View Back Issues</h2>
  </div>


<div class="modal-body">
      <table class="table table-hover">
        <thead>
        <tr>
            <th>Issue Date</th>
        <th>View Issue</th>
      </tr>
    </thead>
    <tbody>
        <tr>
        <td>01122012</td>
        <td><img class="thumb" src="http://localhost/thinklocal/uploads/issues/freestate/thinklocal/img/dec2012.jpg" /></td>
      </tr>
    </tbody>
        </table>
  </div>
            <div class="modal-footer">
          <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                &copy; 2013 thinklocal          </div>
        </div>
    <script>
        $(function() {
                             $('.btn').click(function() { alert('h');
                                $('#myModal').modal('hide');
                             });
                             });
        </script>
    </body>
</html>

2

Contributors

1

Reply

1 Week

Discussion Span

2 Months Ago

Last Updated

10

Views

cgull

Junior Poster in Training

79 posts since Dec 2009

Reputation Points: 35

Solved Threads: 5

Skill Endorsements: 0

2 Months Ago

0

I am developing a site with codeigniter 1.2.2 and the latest version of bootstrap.

Does the bootstrap worked before you merge it to codeigniter?

Where is your bootstrapButton code?

I assume you got that code from here:

http://twitter.github.com/bootstrap/javascript.html#modals

or here:

http://igotstamp.appspot.com/pages/javascript

LastMitch

Industrious Poster

4,212 posts since Mar 2012

Reputation Points: 134

Solved Threads: 336

Skill Endorsements: 45