Как прикрепить готовое модальное окно к сайту с помощью CSS и JQuery

Разместил / Просмотров: 9 578 / комментариев 36

Приветствую Вас, дорогие читатели блога. Сегодня я хочу рассказать Вам как прикрепить простое и уже готовое jquery модальное окно к сайту.

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

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

Посмотреть пример

Данные модальные окна довольно просты и легки в установке. А так же присутствуют три примера всплывания: плавное сверху вниз, просто плавное появление, и стандартное без анимации.

В общем давайте прикреплять :-)

Исходники

Первое, что нужно сделать это скачать сами исходники окон. Затем мы увидим следующее:

Как видите в исходниках у нас есть файл demo.html который Вы можете открыть и сразу же посмотреть пример всплывающих окон на компьютере. Так же присутствует скрипт самих окон jquery.reveal.js, затем jquery-1.4.4.min.js — это фреймворк  jquery, если он у Вас уже прикручен, его можно удалить. И конечно же стили модальных окон reveal.css.

Ещё пару изображений которые используются в оформлении, они не так важны.

Вторым шагом будет прописание стилей и скриптов в сам код сайта.

Стили

Для начала нужно закачать скрипты и стили на хостинг в корневую папку сайта. Затем между тегами <head> </head> вставляем следующее:

<link rel="stylesheet" href="reveal.css"/>

таким образом мы прикрепили стили окон. Главное не забудьте поменять ссылку на стили. В данном случае это просто reveal.css.

Скрипты jquery

Теперь прикрепляем скрипты. Опять же между тегами <head> </head> пишем следующее:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>

Это библиотека jquery. Повторюсь, возможно она уже прикреплена на Вашем сайте. Проверьте. Если да, то пропустите этот шаг.

Теперь сам скрипт модальных окон:

<script type="text/javascript" src="jquery.reveal.js"></script>

Вот видите, ничего сложного нет. Тем более, что уже большую часть работы сделали. :-) Главное не забудете указать правильную ссылку на скрипт jquery.

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

HTML

Так как здесь три примера, выбирайте тот который Вам ближе к душе:

<a href="#"  data-reveal-id="myModal">Плавно сверху</a> 

с этим классом модальное окно появляется плавно сверху.

<a href="#" data-reveal-id="myModal" data-animation="fade">Плавно</a>

здесь окно просто появляется плавно.

<a href="#" data-reveal-id="myModal" data-animation="none">Стандартно</a>

в этом случае появление окна стандартно, без анимации.

После того ка Вы определились со стилем всплывания окна, после ссылки ставим сам код модального окна. Он выглядит так:

<div id="myModal" class="reveal-modal">
 <h1>Зоголовок модального окна</h1>
 <p>Это стандартный вид модального окна, его оформление Вы с лёгкостью сможете изменить в CSS.</p>
 <a class="close-reveal-modal">&#215;</a>
 </div>

Как видите между тегами <h1> и </h1> стоит заголовок, который нужно изменить как Вам нужно. А между тегами <p> и </p> сам текст.

Посмотреть пример

Вот и всё, дорогие друзья. Если у Вас возникнут какие нибудь трудности или вопросы — спрашивайте в комментариях. До скорых встреч.

  • Марат

    А можно сделать, чтобы это окно появлялось автоматически и только 1 раз для одного посетителя? а затем уже по щелчку если что

  • Марат, посмотрите тут http://habrahabr.ru/post/45834/

  • Ух ты! Я такое на Новый Год хотела сделать окошко с поздравлениями. Сама не знала как мастерить, просила брата. А теперь буду сама уметь. Спасибо, Саша!

  • Марат

    спасибо, посмотрю

  • Незачто, Наталья. :-)

  • Дмитрий

    Много интересного, спасибо! Но это Вы и сами знаете, а вот кое-что другое сейчас, похоже, никто не знает. В предложениях типа «Просмотров — 3 517» не дефис, а длинное тире употребляется — «Просмотров — 3 517». Зато «веб-дизайн» пишется через дефис, а не через тире. Написание через тире подразумевает вообще абсурдное утверждение «веб есть дизайн!» Потому что тире в русском заменяет опускаемый глагол-связку «есть». Если мы даже и не собирались ставить в подобных случаях тире, но оставили «для красоты» пробелы до и после дефиса, то многие движки автоматически переправят такой дефис в тире, потому дефис используется без пробелов. С пробелами — оно и козе понятно, что имелось в виду тире. Поэтому в ВордПрессе, например, достаточно пользоваться в наборе одним дефисом с пробелами или без оных и иметь на выходе два разных знака. В работе на других движках достаточно нажать Alt плюс 0151 на цифрофой клавиатуре (или на ноутбуке Fn + Alt и те же 0151 на клавишах ЬОШО), чтобы иметь нормальное тире.

  • Дмитрий

    И чтобы уж добить тему, следует добавить, что в заголовке «Удивительные шедевры талантливого художника – Яна Макартура» перед именем художника вообще не может быть ни тире, ни каких прочих знаков.

  • Дмитрий

    И ещё. Я скопировал Вашу фразу с дефисом «Просмотров – 3 517», и у меня он растянулся в короткое тире. А у Вас почему не растянулся!.. Вы, я думаю, не использовали для этого тэги pre?

    Другой вопрос, почему растянулся в короткое тире? Короткое тире это совсем другой знак. Его отличает от длинного не только длина, но и отсутствие пробелов. Его используют для обозначения временных или каких-нибудь прочих диапазонов, например, «в возрасте 30–40 лет». Не «30-40 лет»!

  • Дмитрий, к чему этот публичный ликбез?
    Если Вы хотите действительно помочь человеку — напишите в личку. А публично рассказывать о том, какой Вы умный и какие вокруг Вас незнайки — как минимум, не тактично…

  • И если уж беретесь учить других, то пишите грамотно: в употребленной Вами фразе «никаких прочих знаков», никаких следует писать слитно.

  • Дмитрий, скажите пожалуйста, а Вы на всех сайтах такие объёмные комментарии пишите, если заметили, что где то в какой то статье стоит не правильный знак — ? :-)

    Я не спорю, что где то у меня есть какие то ошибки. Да они у всех есть! Главное чтобы не грамматические. А то что у меня якобы стоит везде не правильный знак тире, поверьте этого никто не замечает, и это никакого значения не имеет.

    Ещё не было такого, чтобы из за этого знака посетитель покидал сайт. Ссылаясь на то, что не правильный знак стоит, он тупой, не грамотный, и я к нему больше заходить не буду. Смешно :-)

    В этом диалоге я полностью поддерживаю Наталью. Если у Вас есть какие то претензии к моей грамотности, тогда прошу Вас пишите мне на маил.

  • Иришка))

    Дмитрий, нам, по всей вероятности, должно было польстить, что Вы хотите обучить нас безграмотных правилам орфографии и пунктуации? Но для этого есть специальные сайты. И если кому-либо будет интересно, думаю, изучать особенности русского языка лучше там. А здесь нам более интересен смысл статьи, о том что и как делать на своем сайте, который, я считаю, всем доступен и понятен. И смею Вас заверить, что отсутствие пробела или неправильный символ в коде CSS или Html для читателей этого блога будет более существенным и заметным. А Ваш комментарий и к теме не относится, и, извините, вообще не к месту.

  • Иришка))

    Полностью согласна с Наталией. Кроме того, если рассматривать имя художника с точки зрения уточнения или «внесения ясности» — тире очень даже к месту.

  • Иришка))

    Наталия, поддерживаю, правы на 100%!

    Дмитрий, а Вы даже просмотры себе копируете? :-)

  • Саша, думаю, следует поблагодарить Дмитрия за улучшение поведенческих факторов в твоем блоге :) Смотри как дискуссия оживилась)))

  • Иришка, спасибо :-)

  • Наталия, это точно. :-) Русскому языку не получилось поучить, ну хотя бы поведенческие факторы поднял. Спасибо, Дмитрий. :-)

  • Дмитрий

    Ваше «не получилось поучить» звучит забавно!.. «Грамотность на этот сайт не пройдёт!»

    Никаких претензий к Вам, Саша. На сайты, подобные Вашему, я попадаю в поисках ответов на возникающие вопросы. Но подташнивает от безграмотности автора, на какой сайт ни зайди. Кругом — одно. И что мне, делать больше нечего, как на исправление недоучек своё время тратить?! Я это делаю исключительно редко. Только, когда мне вдруг за автора становится обидно.

    Почему не в личку? Не люблю шушукаться. Что до реакции, то я и ожидал нечто подобное. Нормально!.. В стране почти тотальной безграмотности ничто так не задевает самолюбия человека, как замечания о неправильности его речи. Парадокс. Никто о своей грамотности не беспокоится, вообще, считает её последним делом, а попробуй ему что-то на этот счёт сказать — оказывается, на святое посягнул!..

    Пишете, «не спорю, что где то у меня есть какие то ошибки. Да они у всех есть! Главное чтобы не грамматические». Но синтаксис — раздел грамматики и даже более важный, чем морфология, под которой Вы подразумевуаете всю грамматику. Если рассматривать отдельно Ваши морфологические ошибки, то, вот, два примера навскидку: частица «-то» (как и «-либо, -нибудь, -кое», а ещё и «-таки», если она пишется после слова, а не перед ним, например, «таки сделал!») всегда пишется через чёрточку, «не» по частотности в 99% случаев является приставкой и только в одном — предлогом (у Вас все 100% случаев это предлог, Вам это ни о чём не говорит?).

    И самое главное тут — Ваша позиция. По-Вашему, это всё неважно. Сказала бы мне это кухарка, я бы согласился. Но для мужчины, увлекающегося точными предметами, подобное отношение мне кажется более, чем странным… Что вы скажете по поводу записи «font-family: Segoe Ui, Verdana color: #444»? Правда, синтаксис — мелочь? Верстальщик, допускающий подобные ошибки, был бы поднят на смех. А что наша речь? Это такая же знаковая система. Неизмеримо более сложный, но код. В своей речи мы кодируем смыслы, которые хотим передать другому. Стремление к точности в коде и пренебрежение ею в речи — это странно для профессионала.

    Вот, Вам пример, на протяжении всей истории санскрита индийские грамматисты занимались алгебраизацией этого языка. Санскрит — язык высокой литературы, но и сверхточный, как алгебраическая запись, к тому же. Результат? НАСАвский супер-компьютер отказывается общаться с людьми на другом языке. Все прочие — ужасно неточны. Латинский — более-менее точен, но беден, а в сравнении с санскритом вообще убог. Получается, санскрит — единственная звезда среди языков. А всё почему? А потому, что к нему относились, как точной знаковой системе, такой же, как алгебра, HTML или PHP…

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

  • Дмитрий, извините если обидел, но я высказал своё мнение. Опять же не столь важна разница в этой чёрточке, то ли длинная она, или короткая.

    Хотя Вы, наверное, этот комментарий не прочитаете, но всё же напишу.

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

    Да, не спорю, в синтаксисе встречаются ошибки. Не ошибёшся — не научишься. Тем более я только начинающий, без ошибок никак. Хочу добавить, что даже купленные качественные шаблоны не проходят проверку на валидность, думаю, дальше продолжать не стоит. Ошибаются все.

    В общем, ещё раз извините, если обидел.

  • Я думаю, что если бы Дмитрий написал все то же самое, но в личку, реакция была бы совсем другой…
    А «публичная порка» всегда унизительна. Элементарные правила хорошего тона говорят о том, что хвалить нужно публично, а критиковать и ругать — наедине.
    К тому же, человек, для которого русский язык не родной, владеющий им в достаточной степени, чтобы русскоязычные читатели его понимали, уже заслуживает уважения.
    И если бы передо мной стоял выбор: читать глупости, написанные грамотно, или полезную информацию, написанную с ошибками, я предпочту второе…
    Я тоже люблю грамотную речь, но поучать взрослого человека публично считаю недопустимым…
    А шушукаться — это когда двое обсуждают третьего, но никак не диалог двух людей об одном из них.

    P.S. Саша, муж просил передать поздравления по поводу чемпионства «Шахтера»…

  • Павел

    Привет всем. Вот возник вопрос. Как в данное окно, вывести текст из другого HTML файла? Дабы не засорять лишним текстом, файл main.tpl. Делаю на движке DLE. Все получилось красиво, вообще просто круто. Но я все прописал в файле main.tpl моего шаблона. Можно как то вывести из внешнего файла текст в окно?

    Как только не пробовал:
    И
    И яву пробовал.
    Нифига не выводит текст в окно из другого файла.

    Заранее спасибо.

  • Павел, извините, но с DLE я помочь не могу. Возможно тут найдутся люди, которые решат данную проблему.

  • АХТУНГ!

    Здравствуйте!
    В Ваше модальное окно вставил контактную форму. Проблема с php-обработчиком: как что и куда вставить, чтобы сообщение отправлялось не в глубокую даль интернета, а по нужному адресу? Заранее премного благодарен!:)

  • Здравствуйте, Ахтунг. Это точно не проблема модального окна. А в Вашем php обработчике просто нужно, скорее всего, поставить Ваш маил. Там маил стандартный стоит.

  • АХТУНГ!

    Отдельное спасибо за оперативность:) Я и не грешу на модальное. Просто не знаю, где в CMS Opencart php-обработчик… зеленый я еще)

  • Ахтунг, у Вас там должен быть файл на подобие send.php вот в нём нужно скорее всего смотреть. Так тяжело объяснить потому что кода не видел.

  • АХТУНГ!

    Уже глаза почти сломал) но все равно спасибо! Кстати, отличный сайт у Вас!

  • Спасибо огромное :-) Очень приятно :-) И рад, что хоть чем то помог Вам :-)

  • Юрий

    Кака ето ерунда не выравневается по центру автоматически а править css как то не удобно

  • Юрий, значит Вам нужно найти другое модальное окно :-)

  • Евгений

    Привет!
    Очень здоровское у тебя окно, все отлично работает, но, возникла одна сложность: у меня на странице несколько ссылок, которые выводят модальные окна. Точнее, я вставил на страницу 6 таких блоков. При попытке редактирования содержимого первого модального окна, введенная информация появляется и во всех остальных. Редактирование других окон ни к чему не приводит, в них все равно отображается информация из первого блока. В скриптах я не силен, ориентируюсь только в html и css, поэтому не знаю — как решить этот вопрос.

  • Евгений

    Все-все, сам допетрил )
    Еще раз, спасибо за скрипт! Очень хороший!

  • Евгений, рад, что Вам понравился скрипт. Но Вы расскажите как решили эту проблему? :-)

  • Евгений

    Ок, если кому-то пригодится, буду рад.
    Нужно в коде, который вставляем в содержимое страницы (в body) исправить наименование идентификатора «myModal», к примеру, на «myModal_2», ну и т.д. Таких идентификаторов в коде 2: первый — для ссылки, которая вызывает окно и второй, собственно, для настройки содержимого самого окна.

  • Отлично! Спасибо, Евгений :-)

  • Виктор Терентьев

    в ссылке в Dive второго блока ставите не data-reveal-id=»myModal», а скажем data-reveal-id=»myModal1″.

    Далее в самом блоке также ставите не id=»myModal», а id=»myModal1″ и всё! Всё работает! спасибО!