Jquery Dialog мобильная версия....
Здравствуйте, ришили было сгоряча сделать мобильную версию для своего давно существующего проекта и понеслась.... :(
В общем на финишной прямой подвисли два вопроса по поводу диалоговых окон jq. А именно: 1) как заставить позиционироваться модальное диалоговое окно по центру если мобильное устройство вдруг повёрнулось набок? Как есть - оно смещается... 2) В длинной странице открывается небольшой модальный диалог, как запретить тач-скроллинг пока открыт диалог? Как есть - листанул вниз и прощай диалог, потом ищи-свищи... Вызываются так:
$('#example').dialog({
title:"титл",
autoOpen: false,
modal: true,
width: 300,
height:270,
resizable: false,
});
|
Как отцентрировать не знаю, точнее, предположу что у 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-код который запретит скролл на уровне событий |
Цитата:
position: fixed; использовать? Т.о. окно всегда будет на одном месте... |
Цитата:
http://pyha.ru/forum/topic/6754.1 |
krasovsky
с этого начал - но мобильные браузеры отлукавого, и кроссбраузерности таким методом я так и не смог добиться... Плюнул и временно сделал так: При открытии диалога запоминаю отступ в scrl_top и мешаю листать
$(document).scroll(function(){if(noscroll)$(window).scrollTop(scrl_top);});
Криво конечно до ужаса, при попытке прокрутки дрожит всё секуны 2 но зато работает)) ksa position: fixed; - не катит, нужно чтобы пользователь видел на фоне от куда открыт диалог и попадал туда же при его закрытии. А по ссылке там маленько не то, там учатся позиционировать относительно объектов, а мне нужно относительно экрана при его ресайзе. Иными словами мне бы функцию узнать которая диалог центрирует при его открытии, чтоб я её в $(window).resize(...) воткнуть мог. |
А ларчик просто открывался) Вот так хорошо центрирует...
$(window).resize(function() {$("#my_dialog").dialog("option", "position", ['center','top']);});
Только теперь не понятно как воздействовать на все диалоги... Чтобы не вписывать каждый... Пробовал так
$(window).resize(function() {$(".ui-dialog").dialog("option", "position", ['center','center']);});
вообще не работает.. |
Цитата:
$(window).resize(function() {
$(".ui-dialog").each(function (){
$(this).dialog("option", "position", ['center','center']);
})
});
|
Чёт не едит чудо цикл-мотоцикл))
А так едет:
$(this).dialog({position: ['center','center']});
но вместе с ним едет и дизайн диалогового окна :blink: |
Поехал цикл-мотоцикл... Только немножко на другом топливе)))
$(window).resize(function() {
$(".ui-dialog").each(function (){
$(this).children('.ui-dialog-content').dialog("option", "position", ['center','center']);
});
});
|
Уи... Проверил в разных браузерах - всё гуд)) ksa СПАСИБО!!!
Ну теперь осталось домучать вопрос скролинга... Тут задачка повеселей :( |
| Часовой пояс GMT +3, время: 09:16. |