html - Bootstrap Table 加载进度条覆盖

Question

我的 HTML 中某处有一个表和一个使用 ajax 加载下一页的分页。加载数据时，我想用 Bootstrap 进度条覆盖一个 div。

function loadingTable(divID) {

	var html = " <div class='table-loading-overlay'>"
		+ " <div class='table-loading-inner'>"
		+ "<div class=\"col-xs-4 col-xs-offset-4\">"
		+ "<div class=\"progress\"> "
		+ "<div class=\"progress-bar progress-bar-striped progress-bar-streit active\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">"
		+ "        <span class=\"sr-only\">Loading...</span>"
		+ "    </div>"
		+ "    </div>"
		+ " </div>"
		+ " </div>"
		+ " </div>";
	$('#' + divID).append(html);
}
function prevPage(){}
function nextPage(){}

.table-loading-inner {
    width: 100%;
    height: 100%;
}
.table-loading-overlay {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    z-index: 10;
    background:  #000000;
    z-index: 100;
    opacity: 0.5;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
  <div id="userList">
			<table class="table table-striped table-hover">
				<thead>
				<tr>
					<th>Name</th>
					<th>Status</th>
				</tr>
				</thead>
				<tbody>
					<tr>
                  <td>Test 1</td>
                  <td>active</td>
                  </tr>                      
					<tr>
                  <td>Test 2</td>
                  <td>active</td>
                  </tr>                      
					<tr>
                  <td>Test 3</td>
                  <td>active</td>
                  </tr>
					<tr>
                  <td>Test 4</td>
                  <td>active</td>
                  </tr>
					<tr>
                  <td>Test 5</td>
                  <td>active</td>
                  </tr> 
				</tbody>
			</table>
			<div>
				<span style="float:right;"> 10 Users <i class="fa fa-list"></i></span>
			</div>
			<div class="paginator">
				  <span class="btn btn-default" onclick="prevPage();loadingTable('userList');"> prev</span>
				  <span class="btn btn-default"  onclick="nextPage();loadingTable('userList');">next</span>
			</div>
		</div>		 

如何让 table-loading-overlay 覆盖在 table 上？由于表格在 HTML 中无处不在，我不能使用绝对位置...

Answer 1

如果你不想使用绝对定位的 div，你可以给父 div 一个固定的位置。这实际上也应该有效。表格在文档中的位置应该无关紧要。

这是您的示例，父级定位固定。

function loadingTable(divID) {

  var html = " <div class='table-loading-overlay'>"
  + " <div class='table-loading-inner'>"
  + "<div class=\"col-xs-4 col-xs-offset-4\">"
  + "<div class=\"progress\"> "
  + "<div class=\"progress-bar progress-bar-striped progress-bar-streit active\" role=\"progressbar\" aria-valuenow=\"100\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">"
  + "        <span class=\"sr-only\">Loading...</span>"
  + "    </div>"
  + "    </div>"
  + " </div>"
  + " </div>"
  + " </div>";

  $('#' + divID).append(html);
  $('.table-loading-overlay').css('height', $('#' + divID).height() + 'px');
  $('.table-loading-inner').css('padding-top', ($('#' + divID).height() / 2) + 'px');
}
function prevPage(){}
function nextPage(){}

.table-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background:  #000000;
  opacity: 0.5;
}

.table-loading-inner {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div id="userList">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Test 1</td>
        <td>active</td>
      </tr>                      
      <tr>
        <td>Test 2</td>
        <td>active</td>
      </tr>                      
      <tr>
        <td>Test 3</td>
        <td>active</td>
      </tr>
      <tr>
        <td>Test 4</td>
        <td>active</td>
      </tr>
      <tr>
        <td>Test 5</td>
        <td>active</td>
      </tr> 
    </tbody>
  </table>
  <div>
    <span style="float:right;"> 10 Users <i class="fa fa-list"></i></span>
  </div>
  <div class="paginator">
    <span class="btn btn-default" onclick="prevPage();loadingTable('userList');"> prev</span>
    <span class="btn btn-default"  onclick="nextPage();loadingTable('userList');">next</span>
  </div>
</div>