Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Блок с картинкой поверх формы (https://javascript.ru/forum/xhtml-html-css/48963-blok-s-kartinkojj-poverkh-formy.html)

Yaroma11 23.07.2014 16:44

Блок с картинкой поверх формы
 
Здравствуйте, как наложить конкретно на форму полупрозрачный блок с гифкой в центре. Это нужно для загрузки ajax: пока ожидается результат после отправки - форма становится бледной, а поверх в центре крутится гифка. Интересует сам css такого блока и как его наложить на форму. Либо можете предложить свои варианты для решения данной задачи.

MallSerg 23.07.2014 21:58

:before + position:absolute

Yaroma11 24.07.2014 10:21

Цитата:

Сообщение от MallSerg (Сообщение 322465)
:before + position:absolute

можно поподробнее?

MallSerg 24.07.2014 11:35

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>

Yaroma11 24.07.2014 12:51

Спасибо
Цитата:

Сообщение от MallSerg (Сообщение 322555)
500$



Часовой пояс GMT +3, время: 07:24.