Я думаю каждый web-разработчик, рано, или поздно сталкивается с ситуацией когда, во время длительного процесса выполнения какой то операции, нужно перекрыть некий контент страницы. При этом, элементы управления в этом контенте становятся недоступными для пользователя. Как пример можно рассмотреть случай, когда данные в HTML таблице можно редактировать в самой же таблице. Как только пользователь отправит изменения на сервер, мы должны перекрыть всю таблицу, тем самым делая её недоступной для взаимодействия пока изменения не будут сохранены. Вот как это выглядит:
Обратите внимание, что на рисунке перекрыта только таблица, а не вся страница!
Вот какой должна быть HTML разметка и стилизация нашей таблицы:
<div class="overlay-wrapper">
<div class="overlay-pane">
<span class="overlay-loader"></span>
<img src="../../images/ajax-loader.gif" />
</div>
<table class="overlay-content">
<tr>
<th>#</th>
<th>Name</th>
<th>Power</th>
<th>Actions</th>
</tr>
<tr>
<!-- Остальной контент таблицы --!>
</tr>
</table>
</div>
И соответсвующие CSS классы:
.overlay-wrapper {
position: relative;
}
.overlay-pane {
width:100%;
height: 100%;
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: #FFFFFF;
opacity: .7;
text-align: center;
}
.overlay-loader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.overlay-content {
position: relative;
z-index: 1;
}
При этом, чтобы убрать перекрытие достаточно спрятать блок с класом overlay-pane.
Надеюсь кому-то пригодится.
