2
我在我的HTML中有一個表和一個分頁,用ajax加載下一個頁面。 加載數據時,我想用Bootstrap進度條覆蓋div。引導程序表加載進度條覆蓋
function loadingTable(divID) {
\t var html = " <div class='table-loading-overlay'>"
\t \t + " <div class='table-loading-inner'>"
\t \t + "<div class=\"col-xs-4 col-xs-offset-4\">"
\t \t + "<div class=\"progress\"> "
\t \t + "<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%\">"
\t \t + " <span class=\"sr-only\">Loading...</span>"
\t \t + " </div>"
\t \t + " </div>"
\t \t + " </div>"
\t \t + " </div>"
\t \t + " </div>";
\t $('#' + 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">
\t \t \t <table class="table table-striped table-hover">
\t \t \t \t <thead>
\t \t \t \t <tr>
\t \t \t \t \t <th>Name</th>
\t \t \t \t \t <th>Status</th>
\t \t \t \t </tr>
\t \t \t \t </thead>
\t \t \t \t <tbody>
\t \t \t \t \t <tr>
<td>Test 1</td>
<td>active</td>
</tr>
\t \t \t \t \t <tr>
<td>Test 2</td>
<td>active</td>
</tr>
\t \t \t \t \t <tr>
<td>Test 3</td>
<td>active</td>
</tr>
\t \t \t \t \t <tr>
<td>Test 4</td>
<td>active</td>
</tr>
\t \t \t \t \t <tr>
<td>Test 5</td>
<td>active</td>
</tr>
\t \t \t \t </tbody>
\t \t \t </table>
\t \t \t <div>
\t \t \t \t <span style="float:right;"> 10 Users <i class="fa fa-list"></i></span>
\t \t \t </div>
\t \t \t <div class="paginator">
\t \t \t \t <span class="btn btn-default" onclick="prevPage();loadingTable('userList');"> prev</span>
\t \t \t \t <span class="btn btn-default" onclick="nextPage();loadingTable('userList');">next</span>
\t \t \t </div>
\t \t </div> \t \t
如何獲得table-loading-overlay
在桌子上? 由於表可以在HTML無處不在,我不能使用絕對位置...
那麼這工作,但我想有影像重疊在桌子上,而不是在整個頁面... – YAT
您可以用輕鬆地設置固定放置的父母高度jQuery的' css'方法。你已經將父'id'傳遞給你的函數,所以你可以對覆蓋層做任何事情,使它看起來像你想要的。我編輯了我的答案。但是,爲什麼你不想設置* userList * div來定位相對位置,並將覆蓋層定位爲絕對位置?只是好奇。 – DavidDomain