Как сделать всплывающее (pop-up) окно?

Как сделать всплывающее (pop-up) окно — вопрос, который будоражит ум любого молодого начинающего программиста. И сегодня мы рассмотрим, как сделать данное всплывающее окно. Сразу немного забегу вперед, ибо то, что мы сделаем будет поистине очень и очень интересным и функциональным.

Итак, делать мы будем похожее окно, которое я реализовал на сайте одного из моих заказчиков. Посмотреть можно здесь. Огромное преимущество данного метода создания такого окна заключается в том, что мы не будем использовать JavaScript, а ограничимся исключительно моим любимым CSS3 и HTML5. Этим самым мы убьем сразу несколько зайцев. Во-первых, облегчим загрузку нашего сайта, во-вторых, реализуем все в удобном и легком виде с минимальным использованием кода, что позволит Вам самостоятельно придать Вашему всплывающему окну любые размеры, цвета, формы. Я думаю — это здорово. Итак, приступим.

Представьте, у Вас уже есть сайт и Вы хотите, где-то внедрить кнопку, например, «регистрация» или «онлайн заявка». И Вы хотите, чтобы пользователь, нажав на эту кнопку, увидел окошко небольшого размера, которое позволяет ввести в него какие-то данные, а затем отправить их администратору сайта. Вот такое вот окно мы с Вами и будем сейчас делать.

Для начала мы создадим эту кнопку, я думаю, Вы и без особого труда это сделаете. Но в тег <a href> Вы должны вписать следующее #openModal. Вот так это должно примерно выглядеть и у Вас. Далее, перед закрывающим тегом </body> пишем код, который указан ниже. Учтите, что для оформления мы будем использовать классы,  а для вызова окна id. Следуя из этого правила, мы можем создать бесчисленное множество различных всплывающих окон.

Теперь нам нужно красиво все оформить и сделать так, чтобы все работало как нужно. Начнем оформлять.

Оформление

Оформляем нашу ссылку openModal.

Приведенный выше код прост до безобразия. Но на всякий случай, так как я знаю, что мой блог читает достаточно много новичков разберу возможные сложности. Чтобы окно всегда была на одном месте я ему задал фиксированное положение. Также, чтобы окно растягивалось на весь экран я задал координаты углов в точку 0. Для заднего фона установлен черный цвет и добавлена прозрачность, таким образом достигается затемнение вокруг модального окна. Чтобы окно было по верх остальных элементов страницы, установлен большой z-index. Для плавного появления и исчезновения нашего любимого модального окошка, а оно таким станет, поверьте мне, transition. Чтобы спрятать окно необходимо установить display в none. Свойство pointer-events позволяет контролировать интерактивность (кликабельность) элементов.

Открытие всплывающего окна

Мы сделали оформление нашего окна. Но! Оно же, Вы скажете мне, не работает. Да, отвечаю я, это так. Ибо теперь самое интересное. В CSS3 появился псевдокласс target, поистине полезная штука, что ни говори. И в нашем модальном всплывающем окне без него вообще никак. Что оно делает. Данный псевдокласс, если его указать с каким-то элементом, который определен в адресной строке как id, в нашем случае это #openModal. То, свойства этого псевдокласса станут более важными, чем у целевого элемента. Я думаю, Вы уже поняли, что я хочу сделать.

Псевдо-класс target устанавливает DISPLAY в BLOCK и таким образом происходит всплытие окна. Свойство POINTER-EVENTS управляет активностью ссылки.
Свойства DIV устанавливает ширину окна, его положение на экране и отступы для установки окна в центр страницы. Остальные свойства задают поля внутри страницы, скругление углов и фон окна с градиентов от белого до темно-серого.

Закрытие модального окна

Когда задано оформление окна и оно открывается, необходимо сделать кнопку закрытия окна — оформить ее и реализовать функциональность. Использование CSS3 и HTML5 позволяет создавать стильные нестандартные кнопки, не используя при этом изображения:

Для кнопки установлен цветной фон, задана позиция и выравнивание, а также ширина строки. Кнопка круглая благодаря установке свойства border-radius в 12, дополнительно установлена тень от нее.

Для тех, кто ничего не понял (смотрим видео)

Итог

У нас получился отличный pop up. И как видите очень и очень легко. Это всплывающее окно будет работать с любой системой управления, joomla, wordpress или иные. Также этот способ отлично работает во всех браузерах. Думаю, это всплывающее окно станет визитной карточкой Вашего сайта, а простота его конфигурирования дает возможность полностью подогнать дизайн pop up-а под Ваш конкретный сайт. Пользуйтесь.

Комментарии:

X

Создание сайта "стандарт"

Особенности

Подключаемые модули

Заказать
X

Создание сайта "эксклюзив"

Особенности

Подключаемые модули

Заказать
X

Создание сайта "магазин"

Особенности

Подключаемые модули

Заказать
X

Наполнение Вашего сайта

Наполнение сайта информацией еще называется как полный аутсорсинг проекта.

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

Стоимость исходит из конкретных задач и начинается от 15.000 рублей в месяц. В перечень услуг за месяц входят следующие аутсорсинговые задачи:

Учтите, что стоимость работ осуществляется в месяц. Иными словами, если Вы заказываете 1000 товаров. То раньше, чем через три месяца из добавление не будет осуществлено. Выше указаны добавления товаров в месяц. В индивидуальных случаях рассматривается аутсорсинг вместе с продвижением. В этом случае цена будет снижена, в зависимости от затрат на продвижение.

Заказать
X

Оптимизация Вашего сайта

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

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

Стоимость исходит из конкретных задач и начинается от 15.000 рублей в месяц.

Заказать
X

Полное продвижение Вашего сайта

Продвижение сайтов — это комплекс мероприятий, направленный на то, чтобы обеспечить сайту достойное представительство в поисковой выдаче самых популярных поисковых машин: Яндекса и Google. Оказаться в ТОП 10 довольно сложная задача и она не решается за один день. Для успешного продвижения необходимо соблюдение трех основных элементов для каждого сайта:

  1. Оптимизация существующего сайта под поисковые запросы. Сюда входит спектр работ по улучшению валидности сайта для поискового робота: проверяются и иные теги на нормального отображения сайта в поисковой выдаче.
  2. Написание уникальных текстов. Без наполнения — сайт ничто. Поэтому я делаю особый упор на качественном наполнении уникальной информацией Вашего сайта, что способствует появлению Вас в выдаче под конкретный запрос уже в первый месяц продвижения.
  3. Преобретение уникальных ссылок на Ваш сайт. Важным составляющим любого продвижения является количество ссылок на Ваш интернет-ресурс. Чем больше этих ссылок, тем быстрее Вы станете заметнее в сети, тем более конкурентно-способным окажетесь в Вашем бизнесе. С 1 января 2014 года Яндекс постепенно отказывается от ссылок. Это значит, что тратиться на покупку этих ссылок больше не нужно. Ввиду этого, стоимость продвижения уменьшена в два раза!!!

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

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

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

Для наглядности отображения данной темы я составил удобную таблицу с 2 различными тарифными планами. После нее, я дам более подробное описание ее содержимому.

Наименование Стандарт Бизнес
Процент продвигаемых слов от максимального
количества эффективных запросов.
30% 40%
Оптимизация сайта есть есть
Рерайт текстов и написание уникальных статей есть есть
Размещение информации и ссылок
с внешних ресурсов
и блогов на ваш сайт
НЕТ есть (повышение ТиЦ)
Размещение в каталогах Yandex, Rambler, Mail нет есть
Итого 15 000 30 000

Итак, существует два тарифных плана, которые будут для Вас интересны. Все продвижение, для новых сайтов составляет 1 год, для сайтов, которые уже есть в выдачи по некоторым запросам сроки и цена обговаривается отдельно. Из таблицы видно, что я обязуюсь через 1 год предоставить Вам результат, что из всех обговоренных с Вами ключевиков я выведу в топ 30% или 40% от общего количества ключевых фраз. В моем понимании топ — это позиции в выдаче яндекса или гугл с 1 по 10.

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

Заказать
X

Работа по дизайну

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

  1. Разработка дизайна сайта — 13.000 рублей. Срок 5 дней
  2. Разработка логотипа — 10.000 рублей. Срок 12 дней
  3. Разработка визитки — 3.000 рублей. Три варианта 7 дней
  4. Разработка рекламной брошюры (формат А5) — 10.000 рублей. Срок 5 дней
  5. Разработка плаката — от 10.000 рублей.
Заказать