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, время: 18:14. |