Bootstrap模式不起作用 [英] Bootstrap modal doesn't work

查看:101
本文介绍了Bootstrap模式不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试使Bootstrap模态工作,但仍然无法显示.我的代码如下:

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.我究竟做错了什么?它不会给控制台带来任何相关的错误,但仍然看不到错误.

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

推荐答案

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

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)"

这篇关于Bootstrap模式不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆