Блок с картинкой поверх формы
Здравствуйте, как наложить конкретно на форму полупрозрачный блок с гифкой в центре. Это нужно для загрузки ajax: пока ожидается результат после отправки - форма становится бледной, а поверх в центре крутится гифка. Интересует сам css такого блока и как его наложить на форму. Либо можете предложить свои варианты для решения данной задачи.
|
:before + position:absolute
|
Цитата:
|
500$
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.off_img , .on_img {
position: relative;
min-height: 90px; min-width: 90 px; float: left; border: 1px solid red; cursor: pointer;
}
.on_img:before {
position: absolute;
left:0 ; top: 0; right:0; bottom:0;
background: rgba(0,0,0,0.6) url("http://justclickit.ru/flash/comp/comp%20(116).gif") center no-repeat;
content: "";
}
</style>
<script>
function JavaScriptFunction ( element ) {
if (element.className == "on_img" )
{
element.className = "off_img";
}
else if (element.className == "off_img")
{
element.className = "on_img";
} ;
}
</script>
</head>
<body>
<div class="off_img" onclick="JavaScriptFunction( this )"> sdf sdf s sd sds sdczx sdf sdf sdf sd</div>
<div class="off_img" onclick="JavaScriptFunction( this )">1<br>123<br>1<br>1<br></div>
<div class="off_img" onclick="JavaScriptFunction( this )">sdf sdf sdf sd</div>
<div class="off_img" onclick="JavaScriptFunction( this )">sdf sdf s<br> sd sds sdczx<br> sdf sdf sdf sdтекст</div>
<div class="on_img" onclick="JavaScriptFunction( this )"><br> <br> <br> <br> <br> текст sdf sdf s sd sds sdczx sdf sdf sdf sdтекст текст</div>
<div class="off_img" onclick="JavaScriptFunction( this )"> sdf sdf s sd sds sdczx sdf sdf sdf sdтекст текст текст</div>
<div class="off_img" onclick="JavaScriptFunction( this )">текст sdf sdf s sd sds sdczx sdf sdf sdf sd текст текст</div>
</body>
</html>
|
Спасибо
Цитата:
![]() |
| Часовой пояс GMT +3, время: 00:08. |