引导模式对话框不会显示答案

【问题标题】：The bootstrap modal dialog box wont show up引导模式对话框不会显示
【发布时间】：2014-05-24 00:22:56
【问题描述】：

大家好，在我的代码中添加了一个 javascript 之后，即使用户刷新了页面，我的模式对话框也不会再出现。

我的代码是使用单页切换表单（使用 javascript 显示/隐藏），但每次我刷新页面时，它都会转到默认表单，现在我放了一个“jquery cookie 插件”代码，使所选表单保持不变用户刷新页面。

我现在的问题是，如果我单击模态对话框的链接，我的模态对话框将不会显示。

脚本：

    <script src="bootstrap/js/jquery-1.11.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


<script type="text/javascript"> 
      $(function(){

    var page = $.cookie( 'page' ),
        pages = $( '.container' ).children( 'div' );
        $('.myFirst').show();
    pages.hide();
    ( page === undefined ) || $( page ).show();
    $('#show_first,#show_second,#show_third').click(function(){
        var index = $(this).index( 'a[id^=show_]' ),
            curPage;
        curPage = '.' + pages.eq( index ).attr( 'class' );
        pages.hide().eq( index ).show();
        $.cookie( 'page', curPage );
        return false;
    });
});
</script>

模态对话链接：

<a data-toggle="modal" href="#myModal"> Modal Dialog</a>

模态对话框代码：

<div class="container">
            <div class="row">
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <form class="form-horizontal">

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <button type="button" id="show_first" class="btn btn-info" data-dismiss="modal" aria-hidden="true">First</button>
                                                <button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
                                                <button type="button" id="show_third" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Third</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>

html:

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />

    <div class="container">
            <div class="myFirst">
                <div class="row">
                    <center>
                        First Page
                    </center>
                 </div>
            </div>
            <div class="mySecond">
                <div class="row">
                    <center>
                        Second Page
                    </center>
                 </div>
            </div>
            <div class="myThird">
                <div class="row">
                    <center>
                        Third Page
                    </center>
                 </div>
            </div>
    </div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap jquery-cookie

【解决方案1】：

猜想，你有一个 id 为 #myModal 的模态，所以你需要改行： $('.myFirst').show(); 至： $('#myModal').show();

【讨论】：

【解决方案2】：

我通过修改代码来实现这一点。根据引导文档，容器 div 不能嵌套，所以当我删除它时它可以工作。

           <a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>


                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
           hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <form class="form-horizontal">

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" id="show_first" 
 class="btn btn-info" data-dismiss="modal" aria-hidden="true">First</button>
                                            <button type="button" id="show_second" 
  class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
                                            <button type="button" id="show_third" 
   class="btn btn-info" data-dismiss="modal" aria-hidden="true">Third</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

【讨论】：