Question

我试图使Bootstrap模态工作，但它仍然没有显示。我的代码如下所示：

<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。我究竟做错了什么？它没有给控制台带来任何相关错误，但我仍然看不到错误。

Answer 1

我也遇到了Modals的问题。我应该声明 jquery.min.js 之前 bootstrap.min.js （在我的布局页面中）。来自官方网站：“所有插件都依赖于jQuery（这意味着jQuery必须包含 BEFORE 插件文件）”

Answer 2

添加此JS：

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

Bootstrap模式不起作用

2 个答案: