Блок с картинкой поверх формы
Здравствуйте, как наложить конкретно на форму полупрозрачный блок с гифкой в центре. Это нужно для загрузки 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, время: 07:24. |