title: Show overlay with spinner in bootstrap div container?
body: <p>I'm trying to use on Ajax Start/End JQuery to show/hide overlay gray background with the spinner when ajax call is in the process. This works fine in terms of triggering the class that shows the overlay and the spinner but overlay class doesn't show over entire body. For example one of my forms has scroll bar and submit button is on the very bottom of the form. If I click submit I see gray background with the spinner only on the top of the screen. I would like entier screen to be covered. Here is example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ajaxStart(function () { // This function will show/hide spinner on each ajax call in the app.
      timer = setTimeout(function() { $('.overlay').show(); }, 200);
  }).ajaxStop(function () {
      clearTimeout(timer);
      $('.overlay').hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.overlay {
      background: #e9e9e9;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.5;
      height: 100%;
  }
  #loading-img {
      background: url('../Images/Spinner.gif') center center no-repeat;
      height: 100%;
      z-index: 20;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;My Application&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="overlay"&gt;
      &lt;div id="loading-img"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="main-container" class="container"&gt;
      &lt;ul id="agecny-navbar" class="nav nav-tabs"&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#agency-myaccount"&gt;My Account&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
        &lt;div id="agency-myaccount" class="tab-pane fade in active"&gt;
          &lt;form name="frm-myaccount" id="frm-myaccount" autocomplete="off"&gt;
            &lt;div class="form-group"&gt;
              &lt;div id="myaccount-error"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group required isAdmin"&gt;
              &lt;label class="control-label" for="acctive"&gt;Account Active&lt;/label&gt;
              &lt;select class="form-control" name="myaccount-active" id="myaccount-active" required&gt;
                      &lt;option value=""&gt;-- Select the option --&lt;/option&gt;
                      &lt;option value="0"&gt;No&lt;/option&gt;
                      &lt;option value="1"&gt;Yes&lt;/option&gt;
                  &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group required isAdmin"&gt;
              &lt;label class="control-label" for="admin"&gt;System Admin&lt;/label&gt;
              &lt;select class="form-control" name="myaccount-admin" id="myaccount-admin" required&gt;
                      &lt;option value=""&gt;-- Select the option --&lt;/option&gt;
                      &lt;option value="0"&gt;No&lt;/option&gt;
                      &lt;option value="1"&gt;Yes&lt;/option&gt;
                  &lt;/select&gt;
            &lt;/div&gt;
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="fname"&gt;First Name&lt;/label&gt;
              &lt;input type="text" class="form-control" name="myaccount-fname" id="myaccount-fname" placeholder="Enter First Name" maxlength="50" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="lname"&gt;Last Name&lt;/label&gt;
              &lt;input type="text" class="form-control" name="myaccount-lname" id="myaccount-lname" placeholder="Enter Last Name" maxlength="50" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="username"&gt;UserName&lt;/label&gt;
              &lt;input type="text" class="form-control" name="myaccount-username" id="myaccount-username" placeholder="Enter UserName" maxlength="50" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group required password-container"&gt;
              &lt;label class="control-label" for="password"&gt;Password&lt;/label&gt;
              &lt;input type="password" class="form-control" name="myaccount-password" id="myaccount-password" placeholder="Enter Password" maxlength="64" required&gt;
      
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="email"&gt;Email address&lt;/label&gt;
              &lt;input type="email" class="form-control" name="myaccount-email" id="myaccount-email" placeholder="Enter email" maxlength="80" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="question"&gt;Security Question&lt;/label&gt;
              &lt;input type="text" class="form-control" name="myaccount-question" id="myaccount-question" placeholder="Enter Question" maxlength="250" required&gt;
            &lt;/div&gt;
            &lt;div class="form-group required"&gt;
              &lt;label class="control-label" for="answer"&gt;Answer&lt;/label&gt;
              &lt;input type="text" class="form-control" name="myaccount-answer" id="myaccount-answer" placeholder="Enter Answer" maxlength="250" required&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In example above I removed <code>display:none</code> from .overlay class. This will show the overlay the way I see on the screen. I would like the overlay to show over entire screen. Is there a way to show that over entire screen? I have tried to apply overlay class to main container div but that grayed out entire body. If anyone knows how to fix this please let me know. </p>