title: Bootstrap modal is showing as disabled when I use id=footer
body: <p>Bootstrap modal is working fine but when I add footer tags then its showing but as disabled
  <a href="https://i.stack.imgur.com/e7PyZ.jpg" rel="nofollow noreferrer">Her is a image of how the modal is displayed in web page</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!--footer started--&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="container"&gt;
              &lt;div id="footer"&gt;
      &lt;a data-toggle="modal" data-target="#modal1" href="#" &gt;Disclaimer&lt;/a&gt;
  
      &lt;div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;
                      Disclaimer&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  THIS SITE IS THE PROPERTY OF domain.COM. ANY REPRODUCTION
              &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;
      &lt;/div&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
      &lt;!--modal-2--&gt;  
      &lt;a data-toggle="modal" data-target="#modal2" href="#" &gt;Terms of Use&lt;/a&gt;
  
      &lt;div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;
                      Terms of Use&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  THIS SITE IS THE PROPERTY OF domain.COM. ANY REPRODUCTION
              &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;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--container--&gt;
  &lt;/div&gt;&lt;!--row--&gt;
  &lt;/div&gt;&lt;!--footer--&gt;
  &lt;!--footer ended--&gt;
  </code></pre>
  
  <p>Please advise as to why modal is not working with footer id. Yes here is my footer css:</p>
  
  <pre><code>/**footer**/
  #footer {
    position: fixed;
    left: 450;
    margin: 0px auto;
    bottom: 25; 
    margin-top:50; 
    background-color:transparent;
  }  
  </code></pre>