Navbar don't click until i call my modal in Bootstrap

Question

I use Bootstrap (v2.3.2). My navbar is;

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

And i have a button on my caraousel like this;

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

,and my modal is ;

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

When website is openning first time,i can't click "ul" or "li" tags. Dropdown menu not opening.But i call my modal and then close it, i can click navbar perfectly.Dropdown menu is opening success.

I try to define modal above the navbar it doesn't change.

How can i solve this problem? An example is here :http://www.bootply.com/gQZPPqbmcS

Edit: My caraousel code is;

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

I solved it!! I add my modal's class atribute "hide".