Navbar不要点击，直到我在Bootstrap中调用我的模态

Question

我使用Bootstrap（v2.3.2）。我的导航栏是;

<div class="navbar-wrapper">
        <div class="container">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">

                    <button type="button" class="btn btn-navbar" data-toggle="collapse"
                        data-target=".nav-collapse">    
                    </button>

                    <a class="brand" href="index.jsp">MyPage</a>
                    <div class="nav-collapse collapse">


                        <ul class="nav">
                            <li class="active"><a class="brand" href="index.jsp">Home</a></li>
                            <li><a class="brand" href="about.html">About</a></li>
                            <li><a class="brand" href="rm.jsp"  >Contact</a></li>

                            <li class="dropdown"><a class="brand" href="#" class="dropdown-toggle"
                                data-toggle="dropdown">Menü <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="Gallery.jsp" target="_blank">Gallery</a></li>
                                    <li><a href="m.jsp" target="_blank">Some page</a></li>
                                    <li><a href="k.jsp" target="_blank">Guest Book</a></li>


                                </ul>
             </li>
                        </ul>

                        <div style="display: inline-block; margin-top:5px ;margin-left:520px;">

                        </div>


                        <a  target="_blank" href="https://www.facebook.com/groups/bademdere/" class="btn btn-social-icon btn-facebook pull-right">
                            <i class="fa fa-facebook"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>  

我的caraousel上有一个按钮就像这样;

<p><a href="#mapmodals" role="button" data-toggle="modal" class="btn btn-large btn-primary">Show on map</a></p>

，我的模态是;

<div class="modal fade" id="mapmodals">
        <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="myCity">MyPage</h4>
            </div>
            <div class="modal-body">
              <div id="map_canvas" style="width:530px; height:300px"></div>
            </div>
            <div class="modal-footer">
              <button type="button" class="close" data-dismiss="modal">Close</button>
            </div>
      </div>
    </div>
  </div>

当网站第一次开放时，我无法点击＆＃34; ul＆＃34;或＆＃34; li＆＃34;标签。下拉菜单没有打开。但我打电话给我的模态，然后关闭它，我可以完美地点击导航栏。下拉菜单打开成功。

我尝试在导航栏上方定义模态，它不会改变。

我该如何解决这个问题？ 这里有一个例子：http://www.bootply.com/gQZPPqbmcS

编辑：我的caraousel代码是;

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/slide-01.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Wellcome</h1>
                        <p class="lead">Some text <br> some text</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/slide-02.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Loacation</h1>
                        <p class="lead">Some text.</p>


                            <!-- Button to trigger modal -->
                            <p><a href="#mapmodals" role="button" data-toggle="modal" class="btn btn-large btn-primary">See on map</a></p> 

                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/slide-03.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1 style="color: #000000;">text</h1>
                        <p class="lead" style="color: #000000;">Some text</p>
                        <a class="btn btn-large btn-primary"
                            href="y.jsp"
                            target="_blank">text</a>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

Answer 1

<div class="modal fade hide" id="mapmodals">

</div>

我解决了!!我添加了我的模态类属性“hide”。