Как использовать модальные окна на сайте

Длительность: 21 мин. 04 сек.

Размер: 27,7 Мб.

 

В этом уроке мы будем учиться создавать модальные окна на Вашем сайте.

Что это за окна такие и где их можно использовать, Вы можете посмотреть в этом примере.

Я думаю, Вы уже видели подобные вещи на многих сайтах и, возможно, даже задумывались над тем как это делается...

А делается это с помощью плагина Fancybox, который работает с помощью уже знакомой нам javascript-библиотеки jquery.

Если этот плагин Вам понравился, и Вы хотите узнать о нем больше, то советую еще заглянуть сюда.

 

 

 

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Видеоуроки"

  • Как заставить человека просмотреть видео на сайте до конца?

    В этом уроке вы познакомитесь с отличным плеером для показа видео на вашем сайте JW Player, а также научитесь взаимодействовать с ним, привязывая к разным моментам просмотра видео всякие события. Например, если вы делаете какую-то продающую презентацию и хотите, чтобы люди увидели кнопку заказа только ближе к концу презентации, то с помощью данного видео вы сможете это сделать.

  • Эффект дразнящего уголка для вашего сайта

    Я думаю, вы уже много раз наталкивались на эффект дразнящего уголка на сайтах разных инфобизнесменов. Этот прием хорошо себя зарекомендовал, поэтому с помощью него вы сможете немного увеличить свою подписную базу или повысить продажи.

  • Как добавить комментарии Вконтакте к своему сайту

    Многие мечтают о хорошей системе комментариев на своем сайте. Ведь большое количество комментариев к вашим материалам создают активность аудитории, благодаря которой видно, что сайт живой, и его посещают другие люди. Но проблема в том, что большинство стандартных систем комментирования, которые встроены в движки сайтов, позволяют оставлять комментарии только зарегистрированным пользователям. Либо, если открыть их для всех, то вас замучают спамеры.

  • Эффективная гостевая книга для joomla-сайта

    Гостевые книги часто используются на сайтах в качестве эффективного способа обратной связи с людьми, которые заходят на ваш сайт. Посетители могут высказать свое мнение относительно сайта, дать какой-то совет или задать вопрос. И в этом уроке мы установим на сайт, работающий на движке джумла, компонент гостевой книги phoca guestbook.

  • Открываем счет в системе PayPal

    Последние несколько лет все свои покупки на аукционе ebay и многих интернет-магазинах я оплачиваю с помощью системы PayPal. Это удобно, безопасно и быстро. О том, как открыть счет в этой системе, я расскажу в двух видеоуроках, которые записал специально для вас.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 13 Января 2010 16:35
    Serega
    как это внедрить в codeigniter?
  • 13 Января 2010 16:37
    Serega
    в codeigniter нельзя использовать прямые ссылки на файлы, помогите....
  • 15 Января 2010 18:29
    SergStril
    В Opera всё хорошо. И, о чудо, даже в IE всё нормально. Но странное дело, в Mozilla Firefox не работает. Не подскажете, в чём дело?
  • 16 Января 2010 18:27
    VKDanger
    SergStril, из под висты в мозилле всегда у меня работал этот плагин.... посмотрите, не запрещены ли у Вас скрипты, не стоят ли надстройки - фильтры и так далее... если профессионально занимаетесь созданием сайтов, лучше завести абсолютно "чистый" браузер мозиллу (без надстроек) для тестирования. если не поможет - обновите браузер)
  • 16 Января 2010 23:26
    inpost
    Нафиг FancyBox, если можно делать тоже самое через обычный js??? :))) Попробуйте импортировать на один сайт несколько плагинов - будет глюки! :)))
  • 18 Января 2010 09:33
    Oleg
    У меня в Opere все работает, все классно получается. Но есть для меня очень важная проблема это IE, в этом браузере модальные окна не хотят открываться, т.е не полностью поскольку при нажатии на картинку, то фон сначала притемняется, а вот открывание большой фотографии не делает. В чем причина я не знаю, я очень буду признателен если мне кто-нибудь поможет с этой проблемой.
  • 19 Января 2010 02:53
    inpost
    проблемы в дивах position:relative, absolute на твоём сайте! С ними все модальные окна фигово работают! Именно из-за этого я отказался от модальных окон всяких плагинов, и разработал свое персональное модальное окно на js +)
  • 19 Января 2010 19:21
    TheIVA
    Спасибо! Мне это какраз очень вовремя попалось, я недавно сделал сайт и мне нужна была "листалка изображений" но тогда я по не опытности засунул туда lightbox. Это почти тоже самое что и эта, но функций меньше. Но у меня вопрос: Зачем в значение "border" указано 1px, - это не нужно и заставило покопаться в img { border: 0px solid #CCC; padding: 2px; margin: 10px 5px 10px 0; } Но все равно большое СПАСИБО - это действительно очень вовремя!
  • 20 Января 2010 11:34
    andreas
    Спасибо
  • 21 Января 2010 23:14
    Леха
    С http://ruseller.com/lessons.php?rub=29&id=507 и Fancybox возникают ошибки((
  • 23 Января 2010 21:02
    AssFucker
    c кодировкой кирилицей-1251 не хочет работать, только с юникод :(
  • 24 Января 2010 21:22
    Romeo
    а как в этих окнах разместить flash-объект??? пробовал, работает не корректно (открывается как обыкновенная ссылка) ..... подскажите, что я делал не так?
  • 26 Января 2010 11:31
    inpost
    AssFucker: учить быть про, меняй все сайты на ЮТФ-8, чтоб потом проблем не было с кодировкой =))) А на кирилице проблемы будут... обязательно будут! :)
  • 1 Февраля 2010 16:44
    uhans
    Кодировку менять на всем сайте или достаточно текстового файла открывающегося в модальном окне?
  • 1 Февраля 2010 19:21
    uhans
    Спасибо! Разобрался сам.
  • 4 Февраля 2010 20:06
    Мэлс
    uhans разобрался сам, помоги другим! что сделал?
  • 6 Февраля 2010 12:27
    inpost
    Полностью поменять кодировку в: базе данных, страницах, заголовке на пхп, кодировку ОБРАЩЕНИЯ к базе данных. Сделаешь всё это - будет работать=)
  • 14 Февраля 2010 03:29
    LEXA
    Плагин классный! Вот только одна проблема: Модальное окно заползает под flash-объекты. Подскажите пожалуйста кто знает как решить проблему, как сделать так чтобы модальное окно находилось поверх Flash-объектов? Заранее спасибо
  • 16 Февраля 2010 15:10
    Andrey
    to LEXA - если еще актуален вопрос с размещением чего-либо поверх флеша, то могу помочь...
  • 17 Февраля 2010 05:26
    LEXA
    to Andrey - буду очень признателен! Как бы нам лучше обсудить проблему? Может по ICQ или MailRu Agent?
  • 17 Февраля 2010 05:49
    Svetozar
    Спасибо большое, штука в тему. Только гиганские проблемы в IE. Решаются кстати просто - берем последние версии jquery и fancybox с их сайтов (jquery-1.4.1.min.js, jquery.mousewheel-3.0.2.pack.js, jquery.fancybox-1.3.0.pack.js) вместо тех что в уроках и всё корректно и красиво не только в фаерфоксе и опере, но и в IE (6,7,8) Кто-нить, если не влом, напишите как флеш побороть? у меня он тоже поверх отображаеццо :((((
  • 17 Февраля 2010 05:52
    Svetozar
    Автор: Леха (2010-01-21 23:14:04) С http://ruseller.com/lessons.php?rub=29&id=507 и Fancybox возникают ошибки(( Нет ошибок. Ту же менюшку поставил.
  • 17 Февраля 2010 16:51
    Andrey
    Автор: LEXA (2010-02-14 03:29:30) Модальное окно заползает под flash-объекты. Подскажите пожалуйста кто знает как решить проблему... Автор: Svetozar (2010-02-17 05:49:07) Кто-нить, если не влом, напишите как флеш побороть? у меня он тоже поверх отображаеццо :(((( Статью о том, как решить эту проблему написал - осталось только выложить на сайт... вот только сайт у меня щас временно на бесплатном хостинге freetzi.com находится, который щас недоступен. Как только хостинг перестанет глючить - выложу статью и дам ссылку, иначе завтра перенесу сайт на нормальный хостинг и выложу статью туда.
  • 17 Февраля 2010 18:47
    Andrey
    Как и обещал, выкладываю ссылку на статью о проблеме "нежелания" флеша уходить на задний план при использовании лайтбокса (автор статьи - я) - http://createsite.orgfree.com/articles/ Если возникнут вопросы - воспользуйтесь формой обратной связи на сайте или пишите на matroskin8@i.ua
  • 20 Февраля 2010 03:32
    Alexsin
    У КОГО ПРОБЛЕМЫ С ФЛЕШ, ПОЧИТАЙТЕ ПРО ТЕГ <PARAM>, В НЕМ ВСЯ ФИШКА. ТАМ И НАСТРАИВАЕТСЯ БУДЕТ ЛИ ПЕРЕКРЫВАТЬСЯ ФЛЕШЕМ ИЛИ НЕТ.
  • 23 Февраля 2010 13:09
    RUDO
    А уменя проблемы с отображением нескольких видео, воспроизводится только первое видео, хоть и ссылки разные. У кого такие же проблемы?
  • 24 Февраля 2010 21:09
    anazko
    Огромное спасибо за урок и за информацию о таком классном плагине! Успехов вам!
  • 15 Марта 2010 02:53
    КсениЯ
    У меня с плагинами проблемы в IE.Что нужно сделать?
  • 25 Марта 2010 20:06
    Wladimir
    А на ucoz это поставить можно или нет?
  • 26 Марта 2010 20:46
    nik
    Всем привет. Такой вопрос - есть рисунок, на нем ссылка (выделенная область), возможно ли применение этого этого плагина.
  • 28 Марта 2010 15:05
    Wladimir
    Всё разобрался спасибо Евгению за урок.
  • 31 Марта 2010 15:09
    Knopka
    У меня тоже воспроизводится только первое видео на сайте, вроде классы прописала разные и html код видео разный
  • 14 Июня 2010 14:22
    ДимON
    Что-то пример с тестом не могу просмотреть. <em>"Попытка соединения не удалась. Возможно, сайт временно недоступен или перегружен запросами. Подождите некоторое время и попробуйте снова."</em>
  • 29 Июня 2010 17:21
    lemonad
    Wladimir А на ucoz прикалуешся
  • 15 Июля 2010 14:56
    Tens
    Подскажите пожалуйста, я всё установил, модальное окно работает, но в нём не русская кодировка, хотя стоит windows-1251. Как сделать доступным русский текст?
  • 19 Августа 2010 19:33
    expert
    при нажати ссылки открываются модальные окно . и если щелкнуть на неё окно закрываются как можно сделать так окно не закрывался ?
  • 15 Ноября 2010 17:29
    Сергей
    Скритп отличный. Только есть одна загвостка - если вставлять HTML страницу с русским текстом, то вместо текста отображаются вопросительные знаки.
  • 15 Февраля 2011 01:55
    bamut101
    Добрый вечер Евгений! Есть один вопрос насчет модального окна, как сделать так чтобы окно закрывалось только при нажатии на крестик в углу окна, а не в другую часть экрана
  • 28 Февраля 2011 15:44
    vitalon
    Посовеуйте плагин Popup для подписки на рассылку для Joomla. Можно ли внедрить Fancybox в Joomla?
  • 13 Ноября 2011 09:33
    edwarddhon
    В IE9 при первоначальном открытии галерии, и конечно же при открытии одиночной картинки, или при закрытии картинки, картинку обрамляет черная рамка точно по ширине тени. Как это исправить?
  • 4 Марта 2012 16:45
    discot
    hideOnContentClick как поменять в нем значение на false Подскажите пожалуйста.
  • 27 Октября 2013 17:18
    smsg
    Как подключить в Dreamweaver js?
  • 29 Июля 2015 00:08
    sapyrin
    http://premiumkeys.ru/cs_go/32541
^ Наверх ^