table

OlenaKl
1 parent 1ab92388
Showing 3 changed files with 72 additions and 47 deletions Show diff stats
frontend/web/css/general_styles.css
frontend/web/css/main.css
frontend/web/js/script.js
@@ -1324,22 +1324,7 @@ table a{
 /*Modal window*/
  
 /* Окно */
-#modal_form_photo {
-  width: 561px; 
-  height: 391px; /* Размеры должны быть фиксированы */
-  /*border-radius: 5px;*/
-  /*border: 3px #000 solid;*/
-  background: #fff;
-  position: fixed; /* чтобы окно было в видимой зоне в любом месте */
-  top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
-  left: 31%; /* половина экрана слева */
-  margin-top: -150px;
-   /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
-  display: none; /* в обычном состоянии окна не должно быть */
-  opacity: 0; /* полностью прозрачно для анимирования */
-  z-index: 15; /* окно должно быть наиболее большем слое */
-  
-}
+
 /* Кнопка закрыть для тех кто в танке) */
 #modal_form_photo  #modal_close {
   width: 21px;
@@ -2751,15 +2736,12 @@ margin-left: 0!important
 }
  
 #modal_form_photo {
-  width: 561px; 
-  height: 391px; /* Размеры должны быть фиксированы */
-  /*border-radius: 5px;*/
-  /*border: 3px #000 solid;*/
+    width: auto;
+    height: auto;
   background: #fff;
-  position: fixed; /* чтобы окно было в видимой зоне в любом месте */
+  position: absolute; /* чтобы окно было в видимой зоне в любом месте */
   top: 45%; /* отступаем сверху 45%, остальные 5% подвинет скрипт */
-  left: 31%; /* половина экрана слева */
-  margin-top: -150px;
+  left: 50%; /* половина экрана слева */
    /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
   display: none; /* в обычном состоянии окна не должно быть */
   opacity: 0; /* полностью прозрачно для анимирования */
@@ -610,4 +610,19 @@ div.required:after {    content: &quot; *&quot;;
 .details-list th{
     padding: 10px;
     border: 1px solid #dedede;
+}
+
+
+.tovar_table img {
+    float: right;
+    margin-right: 28px!important;
+}
+
+.large_width a:nth-child(1) img {
+    position: absolute;
+    right: -20px!important;
+}
+
+.large_width{
+    padding-left:13px!important;
 }
 \ No newline at end of file
@@ -344,30 +344,58 @@ $(&#39;.phone_control, .phone_placeholder&#39;).click(
 				}
 			);
 	});
-	$('a#go_photo').click( function(event){ // ловим клик по ссылки с id="go"
-		event.preventDefault(); // выключаем стандартную роль элемента
-		// console.log($(this).data('image'));
-		// $('#modal_form_photo img').src($(this).data('image'))
-		$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
-		 	function(){ // после выполнения предъидущей анимации
-				$('#modal_form_photo') 
-					.css('display', 'block') // убираем у модального окна display: none;
-					.animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
-		});
-	});
-	$('.close_span').click(function(){
-		$('.collapse').removeClass('in');
-	});
-	/* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
-	$('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
-		$('#modal_form_photo')
-			.animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
-				function(){ // после анимации
-					$(this).css('display', 'none'); // делаем ему display: none;
-					$('#overlay').fadeOut(400); // скрываем подложку
-				}
-			);
-	});
+	//$('a#go_photo').click( function(event){ // ловим клик по ссылки с id="go"
+	//	event.preventDefault(); // выключаем стандартную роль элемента
+	//	// console.log($(this).data('image'));
+	//	// $('#modal_form_photo img').src($(this).data('image'))
+	//	$('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
+	//	 	function(){ // после выполнения предъидущей анимации
+	//			$('#modal_form_photo')
+	//				.css('display', 'block') // убираем у модального окна display: none;
+	//				.animate({opacity: 1, top: '50%'}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
+	//	});
+	//});
+	//$('.close_span').click(function(){
+	//	$('.collapse').removeClass('in');
+	//});
+	///* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
+	//$('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
+	//	$('#modal_form_photo')
+	//		.animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
+	//			function(){ // после анимации
+	//				$(this).css('display', 'none'); // делаем ему display: none;
+	//				$('#overlay').fadeOut(400); // скрываем подложку
+	//			}
+	//		);
+	//});
+    $('a#go_photo').click( function(event){ // ловим клик по ссылки с id="go"
+        event.preventDefault(); // выключаем стандартную роль элемента
+        var scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+        viewportHeight = $(window).height();
+        var modalWidth=$('#modal_form_photo').width()/2;
+        var modalHeight=$('#modal_form_photo').outerHeight()/2;
+        $('#overlay').fadeIn(400, // сначала плавно показываем темную подложку
+            function(){ // после выполнения предъидущей анимации
+                $('#modal_form_photo')
+                    .css({'display':'block',opacity: 1, marginTop: -modalHeight, marginLeft: -modalWidth}) // убираем у модального окна display: none;
+                    .animate({opacity: 1, top: scrollTop+(viewportHeight/2)}, 200); // плавно прибавляем прозрачность одновременно со съезжанием вниз
+
+
+            });
+
+    });
+    /* Закрытие модального окна, тут делаем то же самое но в обратном порядке */
+    $('#modal_close, #overlay').click( function(){ // ловим клик по крестику или подложке
+        $('#modal_form_photo')
+            .animate({opacity: 0, top: '45%'}, 200,  // плавно меняем прозрачность на 0 и одновременно двигаем окно вверх
+            function(){ // после анимации
+                $(this).css('display', 'none'); // делаем ему display: none;
+                $('#overlay').fadeOut(400); // скрываем подложку
+            }
+        );
+    });
+
+
  
 	$('a#go_project').click( function(event){ // ловим клик по ссылки с id="go"
 		event.preventDefault(); // выключаем стандартную роль элемента