title: bootstrap modal doesn't work properly
body: <p>I've created a navigation bar and in this navigation bar I have login in option . I want a login in window pops out once I hit on it . So I created a modal bootstrap and the thing is it works but once it comes out the whole screen dims rather than the every thing but the pop up modal . Any idea where am I making my mistake ? </p>
  
  <pre><code>  &lt;header id="mu-header"&gt;  
      &lt;nav class="navbar navbar-default mu-main-navbar" role="navigation"&gt;  
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;!-- FOR MOBILE VIEW COLLAPSED BUTTON --&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&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;!-- LOGO --&gt;                                                        
            &lt;!--  Image based logo  --&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;&lt;img src="assets/img/logo.png" alt="Logo img"&gt;&lt;/a&gt; 
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul id="top-menu" class="nav navbar-nav navbar-right mu-main-nav"&gt;
              &lt;li&gt;&lt;a href="#mu-reservation"&gt;Order Here&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#mu-restaurant-menu"&gt;MENU&lt;/a&gt;&lt;/li&gt;   
              &lt;li&gt;&lt;a href="#mu-gallery"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#mu-contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#mu-slider"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#mu-about-us"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;                  
              &lt;li&gt;&lt;a class="login" data-toggle="modal" data-target="#myModal"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;                            
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;       
        &lt;/div&gt;          
  
  
  
  
      &lt;/nav&gt; 
  
  
      &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;This is a large modal.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yCBAY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yCBAY.png" alt="enter image description here"></a></p>