Жесть с позиционированием jQuery.Dialog

И всё прочее, что касается HTML
Правила форума
Убедительная просьба юзать теги [code] при оформлении листингов.
Сообщения не оформленные должным образом имеют все шансы быть незамеченными.
Аватара пользователя
Духовитин
мл. сержант
Сообщения: 125
Зарегистрирован: 2014-12-17 8:46:05

Жесть с позиционированием jQuery.Dialog

Непрочитанное сообщение Духовитин » 2015-03-03 14:59:32

Уважаемые, прошу помощи с нахождением нормального решения для позиционирования появляющегося Dialog'а по центру видимой части страницы.
Это какая-то жесть. Весь день сегодня себе и гуглу с яндексом мозг выедал.

Вобщем есть страничка, на этой страничке при клике на кнопку срабатывает ajax запрос и динамически создаёт клиенту средствами jQuery dialog окошко. Так вот мне надо чтобы это окошко создавалось по центру видимой части экрана (не по центру документа!).
Всё что в инете написано уже перечитал и перепробовал.
Получается постоянно что диалоговое окно создаётся по центру документа и соответственно в эту позицию прокручивает экран при формировании диалогового окна.

Сам решение состряпал с вычислением координат центра видимой части и установки соответствующих координат диалогового окна, но даже в этом случае, при создании окна он сперва прокручивает в центр документа, затем ему устанавливаются координаты центра на этот момент "бывшей" видимой части, и в итоге диалоговое окно отправляется туда куда мне было надо, только страница отскроллена уже на середину документа.

Это тоже решил запоминанием позиции скролла до появления диалога, и после установки ему координат принудительно отскролливаю в исходное место страницу. Но это же такой костыль, что мне просто совестно так оставлять и к тому же в некоторых браузерах (в опере например) этот рывок туда потом обратно виден, что тоже указывает на некоторую корявость реализации.

Помогите кто может пожалуйста.

Ниже упрощённый но рабочий вариант всего мною тут описанного.

Код: Выделить всё

<html>
	<head>
		<title>page</title>
		<link type="text/css" rel="StyleSheet" href="/CSS/jQuery/jquery-ui.min.css" />
		<script type="text/javascript" src="/JScripts/jQuery/jquery.min.js"></script>
		<script type="text/javascript" src="/JScripts/jQuery/jquery-ui.min.js"></script>
	</head>
	<body>
		<!--- Для прокрутки страницы --->
		<div style="height: 2000px; width: 10px;"></div>
		<!--- Кнопка при нажатии на которую всё и происходит --->
		<input type="button" value="Работает" onClick="clk()">
		<input type="button" value="Не работает" onClick="clk1()">
		<!--- Контейнер в котором создаём диалоговые окна --->
		<div id="pgDlg" style="position: absolute;"></div>
	</body>
	<script>
		function clk(){
			pgDlg.innerHTML='<div id="myDialog">Содержимое какое-то</div>';
			//Координаты центра видимой части экрана
			var gx=getClientCenterX();
			var gy=getClientCenterY();

			//Насколько отскроллена до диалога страничка
			var scX=getBodyScrollLeft();
			var scY=getBodyScrollTop();
								
			$( "#myDialog" ).dialog({
				height:			"auto",
				modal:			true,
				open:		function(){
								var x=gx-parseFloat($(this).parent().css("width"))/2;
								var y=gy-parseFloat($(this).parent().css("height"))/2;
								$(this).parent().css("position", "absolute");
								$(this).parent().css("left", x+"px");
								$(this).parent().css("top", y+"px");
								window.scrollTo(scX, scY);
							}
			});
		}
		//Нерабочий вариант
		function clk1(){
			pgDlg.innerHTML='<div id="myDialog">Содержимое какое-то</div>';
			$( "#myDialog" ).dialog({
				height:			"auto",
				modal:			true,
				position:	{
						my:		"center",
						at:		"center",
						of:		window
				}
			});
		}
		//Всякие координатные заморочки (http://mike.mchedlishvili.me/archives/1174)
		function getClientWidth(){
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
		}
		
		function getClientHeight(){
			return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
		}

		function getBodyScrollTop(){
			return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
		}
		
		function getBodyScrollLeft(){
			return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
		}

		function getClientCenterX(){
			return parseInt(getClientWidth()/2)+getBodyScrollLeft();
		}

		function getClientCenterY(){
			return parseInt(getClientHeight()/2)+getBodyScrollTop();
		}
	</script>
</html>
Кто не рискует - тот не пьёт шампанского.

Хостинговая компания Host-Food.ru
Хостинг HostFood.ru
 

Услуги хостинговой компании Host-Food.ru

Хостинг HostFood.ru

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

Иван
проходил мимо

Жесть с позиционированием jQuery.Dialog

Непрочитанное сообщение Иван » 2015-04-17 22:38:48

Пока только так получилось, удалил в файле jquery-ui.js все строки position: и в скрипте ,а
позицию задал в моём файле .css (top, и left) ;