Javascript “引导模式”对话框不会显示

大家好，在将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>

$（函数（）{
var page=$.cookie（'page'），
pages=$（'.container'）.children（'div'）；
$（'.myFirst'）.show（）；
pages.hide（）；
（第===未定义）| |$（第页）.show（）；
$（“#先显示，#后显示，#第三显示”）。单击（函数（）{
var index=$（this）.index（'a[id^=show_uz]'），
库尔佩奇；
curPage='.+pages.eq（index.attr）（'class'）；
pages.hide（）.eq（index.show（）；
$.cookie（'page'，curPage）；
返回false；
});
});

模态diualog链接：

<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:

首页
第二页
第三页

猜测一下，您有一个id为

#myModal

的模态，因此您需要更改行：

$（'.myFirst'）.show（）至：
$（'#myModal'）.show（）
我通过修改代码实现了这一点。根据引导文档，容器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>

模态对话框
第一
第二
第三

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