Комментарии к статье «Модальные окна в веб-приложениях»
| Кодировка | Sol |
|---|---|
|
Подскажите как поменять кодировку (содержимое окна отображаться только если писать на русском) |
|
| Автору | Sol |
|
тоже интересует решение вопроса Александра: Подскажите как прописать картинку в качестве ссылки на модальное окно? |
|
| Лайтбокс | Александр |
| Подскажите как прописать картинку в качестве ссылки на модальное окно? | |
| Prorok | |
| Помогите пожалуйста, что подойдёт для формы + передача из неё параметров | |
| re: А какую Вы посоветуете? | автор |
|
Из базовых библиотек я бы посоветовал либо Prototype либо jQuery. У меня больше опыта с Prototype, и подборка библиотек для модальных окон в этой статье подобрана как раз для Prototype. Но в последнее время Prototype сильно вырос в размерах, да и решений на jQuery появилось побольше, и некоторые из них поэлегантней будут (в плане кол-ва кода и читаемости) Потому я бы на вашем месте начал копать в сторону jQuery |
|
| Форма регистрации | forward |
| А какую Вы посоветуете? | |
| to forward | автор |
|
Реально, подобные вещи брать чужие — довольно накладно, как и в плане поддержки в будущем, так и в плане разбирательства в чужом (часто глючном и громоздком коде) Потому в вашем случае ничего дельного посоветовать не могу — ибо копаться в этой горке кода и тем более смотреть код отдельных файлов у меня нету ни времени ни желания. К тому же, на мой взгляд вы не совсем удачно выбрали базовую библиотеку (prototype-window.xilinus.com) для столь простой и стандартной задачи В моем обзоре как раз видны недостатки данной либы |
|
| Прикрутить форму авторизацию. | forward |
Хочу прикрутить вот эту форму авторизации  http://depositfiles.com/files/76845901.Открыл файл index.tpl 2.Присоединил все Js файлы, все css файлы 3.Ну и прописал где оно должно отображать %<script>Application.addTitle('', 'open_login')</script> <div id="login" style="display:none"> <p><span id='login_error_msg' class="login_error" style="display:none"> </span></p> </div><div style="clear:both"></div> <p><span class="login_label">Имя</span> <span class="login_input"><input type="text"/></span></p> <div style="clear:both"></div> <p><span class="login_label">Пароль</span> <span class="login_input"><input type="password"/></span></p> <div style="clear:both"></div> <div class="listing" style="display:none" id="open_login_codediv"> <xmp id="open_login">okLabel: «Вход», cancelLabel: “cancel”, onOk:function(win){ $('login_error_msg').innerHTML='Имя или пароль неверно'; $('login_error_msg').show(); Windows.focusedWindow.updateHeight(); new Effect.Shake(Windows.focusedWindow.getId()); return false;}}); </div>% И САМОЕ ИНТЕРЕСНОЕ с вот этой частью кода страница не отображается:%Dialog.confirm($('login').innerHTML, {className:»alphacube», width:400, okLabel: «Вход», cancelLabel: “cancel”, onOk:function(win){ $('login_error_msg').innerHTML='Имя или пароль неверно'; $('login_error_msg').show(); Windows.focusedWindow.updateHeight(); new Effect.Shake(Windows.focusedWindow.getId()); return false;}});% её можно кудато перенести или убрать? |
|
| Форма регистрации? | forward |
| Все разобрался..... | |
| Окно авторизации | forward |
|
Вот выдрал из примеров, http://depositfiles.com/files/7682751 немогу только убрать лишний код, без него не работает <script>Application.addShowButton('open_login')</script> <div class="listing" style="display:none" id="open_login_codediv"> <xmp id="open_login"> okLabel: “login”, cancelLabel: “cancel”, onOk:function(win){ $('login_error_msg').innerHTML='Login or password inccorect'; $('login_error_msg').show(); Windows.focusedWindow.updateHeight(); new Effect.Shake(Windows.focusedWindow.getId()); return false;}}); <script>Application.addEditButton('open_login')</script> |
|
| Форма регистрации? | forward |
|
Не подскажите где взять форму регистрации (модальное окно логина и пароля)? Я вот нашел на єтой странице http://prototype-window.xilinus.com/samples.htmlтолько не могу его правельно выдернуть... |
|
| Re: Алекс | Автор |
|
Фон должен темнеть постепенно, ибо это дефолтные настройки ModalBox (посмотрите демки на сайте — там все именно так и происходит) Если у вас такого нету — то скорей всего вы забыли подключить библиотеку script.aculo.us (а именно один из ее компонентов effects.js) Ну и на последок — вам в любом случае придется разобраться с ЯваСкриптом и CSS для того чтобы прикрутить это к своей странице по нормальному =) |
|
| Алекс | |
|
Я не особо дружу с Js и никак не могу установить модал бокс я скачал все скрипты и css'ки как привязать к своей странице не понимаю, единственное что у меня получилось это переход по ссылке а не вызов модального окна. спасибо. P.S. мне нужно чтобы фон постепенно темнел а не сразу как это реализовать ? |
|
| Re: Re: Modalbox & Netscape | Даниил |
|
>>эээ.. это наверное что-то из прошлого века? ;) Ну... не совсем из прошлого века, если учесть, что Netscape 6.0 вышел в 2000 году :) >>Думаю что ваш нетскейп точно входит в погрешность, и заниматься его поддержкой — пустая трата сил и времени Согласен, но не совсем. Ведь не у всех пользователей планеты Земля есть Opera 9.5, MSIE 7.0, Firefox 3.0. ;) Еще есть люди, которые, юзают такие браузеры, как, например, Safari, Avant или Netscape... P.S Этот старенький Netscape 6.2 нужен мне лишь для проверки своего сайта на глюки. (если все работает даже в нем, то, значит, все сделано правильно) |
|
| Re: Modalbox & Netscape | автор |
|
эээ.. это наверное что-то из прошлого века? ;) а вообще, и так понятно что под кроссбраузерностью понимается работа в 95–99% браузеров которыми пользуются в текщий момент времени. Думаю что ваш нетскейп точно входит в погрешность, и заниматься его поддержкой — пустая трата сил и времени p.s. Вы еще попробуйте запустить модалбокс со смартфона =) |
|
| Modalbox & Netscape | Даниил |
| А Modalbox не такой уж и кроссбраузерный – в Netscape 6.1 не работает... | |
| Не помоглось | лёшик |
|
Попробовал, но так ничего и не добился, я так понял в самой библиотеке менять contentType: 'application/x-www-form-urlencoded', contentType: 'text/html', encoding: 'windows-1251', |
|
| Re: кракозяблики | автор |
|
Во первых, начните любить UTF-8 :) Во вторых, проверьте HTTP заголовки того ответа который приходит в ModalBox (если вы используете ajax) в вашем случае там должно быть — Content-Type: text/html; charset=windows-1251; |
|
| кракозяблики | лёшик |
| Ни как не могу избавиться от кракозябликов в русском тексте ModalBox, что там нужно сделать ? контент в 1251 | |
| ModalBox | Алексей |
|
> И можно ли в 1.6.0 и/или 1.5.4 привязать модальное окно к центру? Разобрался. Поправил: %%(php/html)<? _setPosition: function () {
?>this.MBwindow.style.left = Math.round- Element.getWidth(this.MBwindow / 2 ) + “px”; },this.MBwindow.style.top = (this.options.topPosition > Element.getHeight(document.body)) ? “0px” : Math.round(this.options.topPosition) + “px”; А с эффектом нет. |
|
| ModalBox | Алексей |
|
> p.s. Кстати, на ModalBox можно немного поменять дефолтные стили, и отключить эфеект > выползания сверху — и тогда он превратится скорей всего в то что вам нужно — а именно, > модальное окно по центру. Подскажите, как отключить эффект выползания сверху? И можно ли в 1.6.0 и/или 1.5.4 привязать модальное окно к центру? +++ re: ModalBox 1.5.4 и SELECT Проблема с селектом в ModalBox в модальном окне у меня возникла именно с обновленной версией 1.5.4, которая на сайте разработчика значится как NEW. Причем страдают IE6, IE7. Другие браузеры отображают без проблем. См. мой пример: http://www.nsk21.ru/t/ModalBox/Более ранние версии не пробовал, есть ли смысл? Необходима работоспособность и под IE7. |
|
| Re: Cкрол в lightbox? | aвтор |
|
Вообще, рассмотрите более радикальное решение — полный отказ от модальных окон =) Я сейчас во многих проектах такое проталкиваю. Реальная ситуация такова — что модальными окнами просто стали пользоваться как дополнительными «вебдванольными» фишками, используя их где надо и где не надо. Например, самая частая ошибка которую допускают — это забывают про то что контент который грузится внутри модальных окон должен быть доступен по обычным ссылкам для поисковых систем. Насчет конкретно вашей ситуации — я не могу дать какого полезного совета что использовать что нет. В моей ситуации (которая кстати привела к написанию этой статьи) — самой стабильной и безглючной в плане кроссбраузерности оказалась ModalBox. p.s. Кстати, на ModalBox можно немного поменять дефолтные стили, и отключить эфеект выползания сверху — и тогда он превратится скорей всего в то что вам нужно — а именно, модальное окно по центру. |
|
| re: ModalBox 1.5.4 и SELECT | автор |
|
Насколько я изучал код ModalBox,и других библиотек — то проблема с SELECT действительно существует. Но только не внутри ModalBox, а на подложке (т.е. в основном документе). Проблема заключается в баге IE6 (в IE7 такого не наблюдается) — все элементы select ВСЕГДА показываются поверх любого слоя наложенного над ними. Потому для IE6 делается спец. хак — всем элементам типа SELECT проставляется visibility = hidden (можете зайти, например на audioo.com в IE6 и понаблюдать этот эффект на подложке сами) Насчет проблемы с select именно внутри ModalBox — такого на моей памяти не было. В любом случае, возможно это бага — тогда зарапортуйте ее cюда http://code.google.com/p/modalbox/,также поизучайте известные баги и еще иногда спасает downgrade на более старые версии (меня пару раз выручал) |
|
| IE7 | Алексей |
|
Control.Modal не работает в IE7. Проблема с фоном перекрытия. |
|
| Cкрол в lightbox? | forward |
| Так что скролл лучше не ставить? Или может подскажите где там что изменить... | |
| ModalBox 1.5.4 и SELECT | Алексей |
|
Использую ModalBox 1.5.4, возникли пробленмы с элементом SELECT. Если его использовать в модальном окне, тогда он не оображается. ModalBox 1.6.0 глючит в IE7. ModalBox 1.5.4 работает в IE7. ПОдскажите, есть готовое решение для корректного отображения SELECT в ModalBox 1.5.4 ? |
|
| Re: Cкрол в lightbox? | Автор |
|
Ну, как бы приведенный вами код вообще никуда вставлять не надо, поскольку он уже есть в файле lightbox.js и проблемы со скроллом в этой библиотеке вроде бы все решены. Но вообще скороллы — мегапроблема, особенно во всяких IE |
|
| Cкрол в lightbox? | forward |
|
Как сделать скролл вот в этом лайтвоксе:http://particletree.com/examples/lightbox/ В описании написано вставить вот этот код getScroll:function (){ var yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; yScroll = document.documentElement.scrollTop; yScroll = document.body.scrollTop; this.yPos = yScroll; setScroll:function(x, y){ window.scrollTo(x, y); , а куда? Помогите со скролом... Заранее большое СПАСИБО! |
|
| спасибо | miha |
| Действительно – посмотрел на код библиотеки! да она действительно легкая, только жаль подходит не для всех моих решений – пришлось пользоваться более тяжелой библиотекой windows.js но все равно спасибо за ответ | |
| to miha | Автор |
|
Мне кажется ваше решение с двумя модальными окнами не самое лучшее, модальность вообще говоря, подразумевает доступность в данный конкретный момент для пользователя только 1 окна с активным фокусом ввода. Это первый момент, второй момент с которым вы уже стокнулись — это на порядок усложнившийся код в котором нужно заново активировать Event observers на новосозданные DOM элементы. На вашем месте я бы точно отказался от идеи двух окон, и на худой конец поместил бы все что мне надо в одно окно. |
|
| a 2 окна??? | miha |
|
Подскажите – можно ли с помощью modalbox создать 2 окна одно над другим – ну скажем в одном окне мне нужно вводить данные – а верзнее окно будет отображать какой нить компанент – ну типо календаря! 2 окна я вообщем отобразил – только вот одна проблмка – 1 окно после закрытия второго теряет все свои екшены – почему это происходит – понятно – потом что обсерверы настроены на определенные id-шники – (есть конечно решение – перед открытием 2 окна полностью сохронять все экшены документа в какой либо переменной а потом их возвращать, но что-то неполучается! А это было бы здорово! |
|
| Спасибо! | Даниил |
| Огромное спасибо автору статьи! Нашел то, что так долго искал. | |
| to Эдуард | Автор |
|
На sony.ru используются все те же prototype.js + script.aculo.us, которые я упоминал в статье. Соответственно, подобный эффект можно достичь используя эти инструменты. В частности, вам следует взглянуть на effects.js из Script.aculo.us в помощью которого делаются различные фейдинги, перемещения, и ресайзы блоков — насколько я понял эффект, именно эти вещи там используются. Скорей всего, готового решения для вашего эффекта нету, и вам придется программировать его самому. p.s. Вообще говоря, эффект не очень впечатляющий и красивый |
|
| http://www.sony.ru/ | Эдуард |
|
Прочитал Вашу замечательную статью, но так и не смог дотичь эффекта наблюдаемого на странице http://www.sony.ru/ (Продукция, Магазины, Поддержка). Пожалуйста, помогите разобраться как это там сделано. |
|
| Спасибо! | microbit |
|
Огромное Вам спасибо! Очень искал такие окошки, а сам делать не умею! Вот только у Вас и нашел! СПАСИБО! САЙТ СУПЕР! |
|
| ExtJS | Автор |
| У ExtJS все хорошо, кроме одного — она платная. | |
| Scratch | |
|
Хм... Не Prototype, конечно, но — ExtJS. Недостатки — большой код (хотя можно собрать и персональную версию). Достоинства: 1) Может работать совместно с Prototype (равно как с JQuery и Yahoo) Хорошая документация, хороший код, масса примеров, удобно (в конце-концов), да и компонент много. |
|
| DEkart | |
| Подборка шикарная, спасибо за обзор! | |
| Какраз в тему | Роман |
|
Как раз позавчера писал подобное и нужны были модальные окна. ModalBox попалась сразу, я ею доволен на все 100 |
|
| madhun | |
|
Небольшое замечание: в описании Control.Modal ссылка на демку ведёт на http://particletree.com/examples/lightbox/ – демо Lightbox Gone Wild. В остальном всё прекрасно. Большое спасибо за полезную статью. |
|
