Question

我正在尝试使用Ajax Start / End JQuery在进程中调用ajax时使用微调器显示/隐藏覆盖灰色背景。这在触发显示叠加层和微调器的类方面工作正常，但叠加层不会显示在整个主体上。例如，我的一个表单有滚动条，提交按钮位于表单的最底部。如果我点击提交，我只会在屏幕顶部看到带有微调器的灰色背景。我希望屏幕被覆盖。这是一个例子：

＆＃13;

$(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();
});

＆＃13;

.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;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="Bootstrap/Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="overlay">
    <div id="loading-img"></div>
  </div>
  <div id="main-container" class="container">
    <ul id="agecny-navbar" class="nav nav-tabs">
      <li><a data-toggle="tab" href="#agency-myaccount">My Account</a></li>
    </ul>
    <div class="tab-content">
      <div id="agency-myaccount" class="tab-pane fade in active">
        <form name="frm-myaccount" id="frm-myaccount" autocomplete="off">
          <div class="form-group">
            <div id="myaccount-error"></div>
          </div>
          <div class="form-group required isAdmin">
            <label class="control-label" for="acctive">Account Active</label>
            <select class="form-control" name="myaccount-active" id="myaccount-active" required>
                    <option value="">-- Select the option --</option>
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
          </div>
          <div class="form-group required isAdmin">
            <label class="control-label" for="admin">System Admin</label>
            <select class="form-control" name="myaccount-admin" id="myaccount-admin" required>
                    <option value="">-- Select the option --</option>
                    <option value="0">No</option>
                    <option value="1">Yes</option>
                </select>
          </div>
          <div class="form-group required">
            <label class="control-label" for="fname">First Name</label>
            <input type="text" class="form-control" name="myaccount-fname" id="myaccount-fname" placeholder="Enter First Name" maxlength="50" required>
          </div>
          <div class="form-group required">
            <label class="control-label" for="lname">Last Name</label>
            <input type="text" class="form-control" name="myaccount-lname" id="myaccount-lname" placeholder="Enter Last Name" maxlength="50" required>
          </div>
          <div class="form-group required">
            <label class="control-label" for="username">UserName</label>
            <input type="text" class="form-control" name="myaccount-username" id="myaccount-username" placeholder="Enter UserName" maxlength="50" required>
          </div>
          <div class="form-group required password-container">
            <label class="control-label" for="password">Password</label>
            <input type="password" class="form-control" name="myaccount-password" id="myaccount-password" placeholder="Enter Password" maxlength="64" required>
    
          <div class="form-group required">
            <label class="control-label" for="email">Email address</label>
            <input type="email" class="form-control" name="myaccount-email" id="myaccount-email" placeholder="Enter email" maxlength="80" required>
          </div>
          <div class="form-group required">
            <label class="control-label" for="question">Security Question</label>
            <input type="text" class="form-control" name="myaccount-question" id="myaccount-question" placeholder="Enter Question" maxlength="250" required>
          </div>
          <div class="form-group required">
            <label class="control-label" for="answer">Answer</label>
            <input type="text" class="form-control" name="myaccount-answer" id="myaccount-answer" placeholder="Enter Answer" maxlength="250" required>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

在上面的示例中，我从.overlay类中删除了display:none。这将以我在屏幕上看到的方式显示叠加层。我希望覆盖图显示在整个屏幕上。有没有办法在整个屏幕上显示？我试图将叠加类应用于主容器div但是整个主体变灰了。如果有人知道如何解决这个问题，请告诉我。

在bootstrap div容器中使用微调器显示叠加层？

0 个答案: