Всплывающее окно на CSS

css popupИсточник: http://dbmast.ru/sozdaem-vsplyvayushhee-okno-pri-zagruzke-sajta-s-pomoshhyu-css3-i-nemnogo-javascript/comment-page-2#comments

Ранее я писала о разных вариантах реализации всплывающего окна для сайта. Видимо тема очень актуальна, так как статья является самой популярной на моем сайте. Позже я наткнулась на очень хороший вариант всплывающего окна выполненном на чистом CSS. По ссылке указанной в Источнике вы найдете вариант всплывающего окна при загрузке страницы. Работает отлично, а главное без плагинов. Такой вариант я использую и на этом сайте. Это лучший вариант, который мне удалось найти в интернете. А потом я нашла еще один вариант

Немного модифицировав CSS, предлагаю Вам два варианта всплывающего окна на CSS при клике на ссылку. Конечно без Javascript события onclick обойтись не удалось, но все остальное это только CSS. Д

Выглядят окна так:

ВАРИАНТ 1 — Нажмите на ссылку


ВАРИАНТ 2 — Нажмите на ссылку

Устанавливаются эти окна очень просто. Для этого нужна соответствующая HTML разметка с применением нужных идентификаторов и CSS стили, соответствующие ей.

HTML

HTML состоит их двух частей:
— ссылки на окно;
— собственно самого окна

Важно! Менять разметку окон нельзя иначе оно не будет работать.
Само окно может быть размещено на странице где угодно.

Вариант 1

Вариант 2

CSS

Но окно не будет работать без стилей CSS. Именно они отвечают за вид окна, за его появление и исчезание.

Стили для Варианта 1

Стили для Варианта 2

В этих стилях объединены вместе стили вплывающего окна при клике на ссылку и стили всплывающего окна при загрузке страницы.

Всплывающее окно при загрузке страницы

Если вы хотите, чтобы такое окно появлялось при загрузке страницы, тогда нужно удалить ссылку на окно

а перед закрывающемся тегом </body> добавить следующий javascript:


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

41 комментария

  1. ВЫ СПАСИЛИ МЕНЯ ПРОСТО! 4 НЕДЕЛИ ЭТУ ШТУКУ НЕ МОГ СДЕЛАТЬ!!!1

  2. А еще вопрос: А как поступить если несколько ссылок, и нужно открывать окна с разным содержимым для каждой ссылки?

  3. В IE 11 не работает. Оба варианта. Ссылка есть, а по клику тишина. 🙁

  4. Чет я не пойму. И как мне это вставить в пост WordPress?
    Эти скрипты пропадают же.

  5. Помогите пожалуйста! Вставил весь необходимый код (вариант 1 при загрузке страницы), но окно ни на одной странице так и не появилось! Что я сделал не так?

  6. Здравствуйте. А не подскажите возможно ли, если да то как, вписать в окно почтовую форму Contact Form 7 вордпресс. Шорт кодом не получается.. Спасибо.

    • Александр, а в чем проблема? У меня прекрасно вставляется шоткод Contact Form 7. Что именно не получается.

      • Спасибо за ответ! Все поставил согласно описанному выше алгоритму- окно открывается, вставляю шорткод формы вместо:
        Тут может быть абсолютно любой html или даже скрипты
        отображается шорткод, шорткодом, а не почтовой формой для заполнения.. Прошу прощения за мою туповатось, но не могли бы Вы подробней описать как проделать сей ритуал.

  7. А почему появляется\ при входе на страницу только 1 раз, а после закрытия не пашет! что то менять надо? или время какое то должно пройти?

  8. Спасибо за скрипт. Как можно сделать чтобы окно не закрывалось после перезагрузки страницы.

  9. Отличная форма. Большое вам спасибо за такое подробное объяснение. Все быстро встроилось и работает. И, подскажите, как (хотя бы примерно) сделать, чтобы окно закрывалось не только по клику на крестик, но и по клику на пространство вне формы (которое стилями затемнено).

  10. Добрый день!
    Попробывал)))
    Но не понял — написано вставиться в любое место страницы, главное не менять ничего.
    Вставил и что вижу — просто вижу на странице окно, не всплывающее по клику, а постоянно на странице, нажимаем убрать окно — убирается. Нажимаем на клик опять просто появляеться на странице. И все это там где именно вставил)))
    То ли Вы описали и я не понял. То ли описание не верное.
    Вообщем не получилось

  11. Спасибо!Помогите еще в одном вопросе.Нужно чтобы при открытии страницы всплывающее окно появлялось с задержкой.

  12. Подскажите, как сделать, чтобы окно появлялось при загрузке страницы и через какое то время само закрылось.

    • Андрей, нужно к скрипту добавить строки:

  13. А как по вашему лучше вставить ифрейм со страницей другого сайта, через такое окно оформленное стилями, или обычным всплывающим окошком (как в другой вашей статье)?
    Скорее всего в оформленное CSS окошко будет трудно гармонично вписать сторонний сайт и смысла в этом оформлении не много, я правильно мыслю?

  14. Добрый день. А как сделать несколько всплывающих окон по разным ссылкам

  15. Спасибо, после закрытия попапа, заново не открывается без перезагрузки страницы

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *