Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.10.2014, 00:24
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

Как отцентрировать не знаю, точнее, предположу что у 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-код который запретит скролл на уровне событий

Последний раз редактировалось krasovsky, 31.10.2014 в 13:11.
Ответить с цитированием
  #3 (permalink)  
Старый 31.10.2014, 13:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,471

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

использовать?
Т.о. окно всегда будет на одном месте...
Ответить с цитированием
  #4 (permalink)  
Старый 31.10.2014, 13:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,471

Сообщение от hated8
как заставить позиционироваться модальное диалоговое окно по центру
Может вот это поможет...
http://pyha.ru/forum/topic/6754.1
Ответить с цитированием
  #5 (permalink)  
Старый 31.10.2014, 14:28
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

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

ksa position: fixed; - не катит, нужно чтобы пользователь видел на фоне от куда открыт диалог и попадал туда же при его закрытии.
А по ссылке там маленько не то, там учатся позиционировать относительно объектов, а мне нужно относительно экрана при его ресайзе. Иными словами мне бы функцию узнать которая диалог центрирует при его открытии, чтоб я её в $(window).resize(...) воткнуть мог.
Ответить с цитированием
  #6 (permalink)  
Старый 31.10.2014, 14:39
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

Только теперь не понятно как воздействовать на все диалоги... Чтобы не вписывать каждый...
Пробовал так
$(window).resize(function() {$(".ui-dialog").dialog("option", "position", ['center','center']);});
вообще не работает..
Ответить с цитированием
  #7 (permalink)  
Старый 31.10.2014, 14:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,471

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

$(window).resize(function() {
   $(".ui-dialog").each(function (){
      $(this).dialog("option", "position", ['center','center']);
   })
});
Ответить с цитированием
  #8 (permalink)  
Старый 31.10.2014, 15:02
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

но вместе с ним едет и дизайн диалогового окна
Ответить с цитированием
  #9 (permalink)  
Старый 31.10.2014, 15:17
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

Последний раз редактировалось hated8, 31.10.2014 в 15:20.
Ответить с цитированием
  #10 (permalink)  
Старый 31.10.2014, 15:28
Интересующийся
Отправить личное сообщение для hated8 Посмотреть профиль Найти все сообщения от hated8
 
Регистрация: 24.04.2010
Сообщений: 27

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery dialog запускается только при втором обращении Фоныч jQuery 6 19.02.2014 14:04
Как уменьшить лишнее пустое место в диалоге jQuery dialog? xintrea Элементы интерфейса 1 23.06.2013 18:52
jQuery UI Dialog, modal:true и белая полоса frutality jQuery 10 19.06.2013 14:52
jquery UI dialog rolph jQuery 9 30.03.2010 15:35
Jquery dialog HardRock jQuery 11 14.08.2009 08:35