title: Buttons in bootstrap modal is not responding
body: <p>I am trying to have a modal as navigation bar for mobile view, And</p>
  
  <p>When I run the below snippet, In <strong>mobile view</strong> when I click on icon bar/ menu bar, None of buttons are responding in the modal. I am not getting any clue on this. Thanks for any help in advance</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="height: 100vh !important"&gt;
        &lt;div class="modal-dialog" role="document"&gt;
           &lt;div class="modal-content"&gt;
              &lt;div class="modal-body" style="height: 100vh; opacity:1"&gt;
                 &lt;button type="button" class="close" data-dismiss="modal"  &gt;&amp;times;&lt;/button&gt;
                 &lt;ul class="nav navbar-nav navbar-right hidden-lg hidden-md" &gt;
                    &lt;li&gt;&lt;a href="#myPage"&gt;HOME1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#band"&gt;BAND1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#tour"&gt;TOUR1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="dropdown"&gt;
                       &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;MORE
                       &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                       &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Merchandise&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Extras&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
    &lt;div class="bg-img-hero"&gt;
       &lt;nav class="navbar  navbar-default navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
             &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myModal"&gt;
                &lt;span class="icon-bar" style="color: yellow !important"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;    
                &lt;/button&gt;
  
             &lt;/div&gt;
             &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
                &lt;ul class="nav navbar-nav navbar-right" &gt;
                   &lt;li &gt;&lt;a href="HowItWorks.html" style="color: white !important"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#band" style="color: white !important"&gt;BAND&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#tour" style="color: white !important"&gt;TOUR&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#contact" style="color: white !important"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
             &lt;/div&gt;
             &lt;div class="collapse navbar-collapse" id="myNavbar1"&gt;
                &lt;ul class="nav navbar-nav navbar-right hidden-lg hidden-md" &gt;
                   &lt;li&gt;&lt;a href="HowItWorks.html"&gt;HOME1&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#band"&gt;BAND1&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#tour"&gt;TOUR1&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
             &lt;/div&gt;
  
          &lt;/div&gt;
       &lt;/nav&gt;
    &lt;/div&gt;
  </code></pre>