Question

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

Answer 1

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

Answer 2

我通过修改代码来实现这一点。根据bootstrap文档，容器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>

引导模式对话框不会显示

2 个答案: