Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Jquery Dialog мобильная версия.... (https://javascript.ru/forum/jquery/51275-jquery-dialog-mobilnaya-versiya.html)

hated8 31.10.2014 01:24

Jquery Dialog мобильная версия....
 
Здравствуйте, ришили было сгоряча сделать мобильную версию для своего давно существующего проекта и понеслась.... :(
В общем на финишной прямой подвисли два вопроса по поводу диалоговых окон jq. А именно:
1) как заставить позиционироваться модальное диалоговое окно по центру если мобильное устройство вдруг повёрнулось набок? Как есть - оно смещается...
2) В длинной странице открывается небольшой модальный диалог, как запретить тач-скроллинг пока открыт диалог? Как есть - листанул вниз и прощай диалог, потом ищи-свищи...
Вызываются так:
$('#example').dialog({
		title:"титл",
		autoOpen: false,
		modal: true,
		width: 300,
		height:270,
		resizable: false,
	});

krasovsky 31.10.2014 14:05

Как отцентрировать не знаю, точнее, предположу что у dialog есть какой нибудь метод-api который перепозиционирует окно, либо парься сам =) переустанови общему контейнеру css свойства, для left вычислить можно так ($(window).width()/2)-($('.ui-dialog.ui-front').width()/2)

По второму - запрещаем скролл с помощью overflow:hidden, вот тебе вариант кода,оформишь себе сам
Для html в css лучше прописать overflow:scroll;
После запрета кода все уедет вверх, поэтому к контейнеру для всего контента придется применить отрицательный margin
var scrollValue = 0;
	var disable = function() {
		scrollValue = $(document).scrollTop();
		$('body').css({overflow:'hidden'});
		$('#page').css({'margin-top':-this.scrollValue});
	}
	var enable = function() {
		$('body').css({overflow:'visible'});
		$('#page').css({'margin-top':0});
		$(document).scrollTop(this.scrollValue);
	}

Либо ищи js-код который запретит скролл на уровне событий

ksa 31.10.2014 14:29

Цитата:

Сообщение от hated8
как запретить тач-скроллинг пока открыт диалог? Как есть - листанул вниз и прощай диалог, потом ищи-свищи

Может не скролинг запрещать, а
position: fixed;

использовать?
Т.о. окно всегда будет на одном месте...

ksa 31.10.2014 14:35

Цитата:

Сообщение от hated8
как заставить позиционироваться модальное диалоговое окно по центру

Может вот это поможет...
http://pyha.ru/forum/topic/6754.1

hated8 31.10.2014 15:28

krasovsky
с этого начал - но мобильные браузеры отлукавого, и кроссбраузерности таким методом я так и не смог добиться... Плюнул и временно сделал так: При открытии диалога запоминаю отступ в scrl_top и мешаю листать
$(document).scroll(function(){if(noscroll)$(window).scrollTop(scrl_top);});

Криво конечно до ужаса, при попытке прокрутки дрожит всё секуны 2 но зато работает))

ksa position: fixed; - не катит, нужно чтобы пользователь видел на фоне от куда открыт диалог и попадал туда же при его закрытии.
А по ссылке там маленько не то, там учатся позиционировать относительно объектов, а мне нужно относительно экрана при его ресайзе. Иными словами мне бы функцию узнать которая диалог центрирует при его открытии, чтоб я её в $(window).resize(...) воткнуть мог.

hated8 31.10.2014 15:39

А ларчик просто открывался) Вот так хорошо центрирует...
$(window).resize(function() {$("#my_dialog").dialog("option", "position", ['center','top']);});

Только теперь не понятно как воздействовать на все диалоги... Чтобы не вписывать каждый...
Пробовал так
$(window).resize(function() {$(".ui-dialog").dialog("option", "position", ['center','center']);});
вообще не работает..

ksa 31.10.2014 15:48

Цитата:

Сообщение от hated8
Только теперь не понятно как воздействовать на все диалоги... Чтобы не вписывать каждый...

Цикл-мотоцикл... ;)

$(window).resize(function() {
   $(".ui-dialog").each(function (){
      $(this).dialog("option", "position", ['center','center']);
   })
});

hated8 31.10.2014 16:02

Чёт не едит чудо цикл-мотоцикл))
А так едет:
$(this).dialog({position: ['center','center']});

но вместе с ним едет и дизайн диалогового окна :blink:

hated8 31.10.2014 16:17

Поехал цикл-мотоцикл... Только немножко на другом топливе)))
$(window).resize(function() {
   $(".ui-dialog").each(function (){
      $(this).children('.ui-dialog-content').dialog("option", "position", ['center','center']);
   });
});

hated8 31.10.2014 16:28

Уи... Проверил в разных браузерах - всё гуд)) ksa СПАСИБО!!!

Ну теперь осталось домучать вопрос скролинга... Тут задачка повеселей :(


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