Bootstrap modal doesn't work

Question

I'm trying to make Bootstrap modal work but it still doesn't display. My code looks like this:

<div class="modal fade" id="popup" tabindex="-1" role="dialog" aria-labelledby="popup" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Edit</h4>
                </div>
              <div class="modal-body">

                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th class="col-md-2">
                                        Start Valid (DD/MM/YYYY)
                                    </th>
                                    <th class="col-md-2">
                                        Valid Until (DD/MM/YYYY)
                                    </th>
                                    <th class="col-md-2">
                                        Code
                                    </th>
                                    <th class="col-md-2">
                                        Amount
                                    </th>
                                    <th class="col-md-2">
                                        Status
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="first">
                                    <td>
                                         <div class="field-box">

                                            <input type="text" value="03/29/2013" class="form-control input-datepicker" />
                                        </div>
                                    </td>
                                    <td class="description">
                                        <div class="field-box">

                                            <input type="text" value="03/29/2013" class="form-control input-datepicker" />
                                        </div>
                                    </td>
                                    <td class="description">

                                           <div class="field-box">

                                                    <input class="form-control" type="text" placeholder="1111-1111-1111-1111"/>
                                           </div>                            


                                    </td>
                                    <td class="description">
                                        <div class="field-box">

                                            <input class="form-control" type="text" placeholder="10.0"/>
                                        </div> 
                                    </td>
                                    <td class="description">
                                        <div class="field-box">
                                            <div class="ui-select">
                                                <select>
                                                    <option selected>ACTV</option>
                                                    <option>Custom</option>
                                                    <option>Custom</option>
                                                </select>
                                            </div>

                                        </div> 
                                    </td>


                                </tr>

                            </tbody>
                        </table>
                        </div><!-- end body -->
                        <div class="modal-footer">
                                 <div class="col-md-12">
                                            <a class="btn-flat gray" href="#">Save</a>
                                        </div>

                            <p><a href="#">Back to Campaign</a></p>
                            <p><a href="#">Search Gift Voucher Purchase</a></p>
                        </div><!--end footer -->


                  </div><!-- end modal content -->
                </div> <!-- end modal dialog -->
        </div><!-- end popup -->

bootstrap.js is included. What am I doing wrong? It brings no related errors to console, but still I can't see the error.

Answer 1

I had an issue with Modals as well. I should have declare jquery.min.js BEFORE bootstrap.min.js (in my layout page). From official site : "all plugins depend on jQuery (this means jQuery must be included BEFORE the plugin files)"

Answer 2

Add this JS:

$('#popup').modal();