Как правильно задать позиционирование popup окна?

135

20 февраля 2018, 08:12

Использую шаблон "Лайтшоп" на Opencart 2.3.0.2. Изначально в шаблоне поле поиска разворачивалось до середины страницы. При уменьшении ширины поля поиска и списка возникает ситуация которую можно увидеть на скриншоте. Список позиционируется не там где хотелось бы, стили на его положение не влияют. Нашел файл в котором с помощью js устанавливается его положение. Сам только начал изучать основы js, редактировал код, ситуация не менялась. Подскажите, пожалуйста, как нужно код изменить, чтобы список отображался прямо под полем поиска. Указал весь код, где упоминалось "Pos.left". Изначально: После:

/* позиционирование попапа */ 
	function setPosition($obj, $rel) { 
		var	relPos = $rel.offset(), 
			relW = $rel.width(), 
			relH = $rel.outerHeight(), 
			windWidth = window.innerWidth, 
			popupW, 
			popupPos = {}, 
			popupPosR, 
			overLeft, 
			overRight, 
			$marker, 
			markerPos = {}; 
		if (windWidth > 767) { 
			popupW = $obj.width(); 
			popupPosR = relPos.left - 50 + popupW; 
			overRight = windWidth - popupPosR; 
			overLeft = relPos.left - 50; 
			popupPos.top = relPos.top + relH + 45; 
			if (overLeft < 0) { 
				popupPos.left = 30; 
			} else if (overLeft > 0 && overRight > 0) { 
				popupPos.left = relPos.left - 50; 
			} else if (overRight < 0) { 
				if (windWidth > 800) { 
					popupPos.left = windWidth - popupW - 30; 
				} else { 
					popupPos.left = windWidth - popupW; 
				} 
				 
			}  
			 
			$obj.offset(popupPos) 
			$marker = $('.js-popup-marker'); 
			markerPos.left = relPos.left - 11 + relW / 2; 
			$marker.offset(markerPos); 
			 
		}  
	} 
  // Show 
			this.show = function() { 
				var pos = $(this).position(); 
 
				$(this).siblings('ul.search__list').css({ 
					top: pos.top + $(this).outerHeight(), 
					left: pos.left 
				}); 
 
				$(this).siblings('ul.search__list').show(); 
			}