Всплывающее окно на 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. Думаю, такое окно есть и на сайте автора, но я не искала. А не добавить это окно себе в коллекцию я просто не могла.

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

Нажмите на ссылку

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

HTML

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

Окно может быть размещено на странице где угодно на странице. Главное не менять разметку и идентификаторы окна.

Чтобы это окно открывалось при нажатии, на той же странице, где расположено это окно нужно добавить ссылку на него.

В этой ссылке вы можете менять только слова Нажмите на ссылку. Все остальное менять нельзя.

CSS

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

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

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

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


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

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

46 Comments

  1. приветствую, куда можно вставить эту часть?

    ×
    Some text in the Modal..

    Кроме как в код страницы

  2. Спасибо, то что надо! Странно, давно искал на css хорошее модальное окно, а нашёл только сейчас, хотя статья написана аж в 2015 году!

    Чуть-чуть доработал, и теперь после заголовка в модальном окне есть скролл (для длинных по вертикали сообщений). Кому интересно, в коде html, после:

    Ваш заголовок
    добавить:
    Ваш текст
    Ну, и так далее.
    Теперь заголовок остаётся как шапка на месте, а текст в скролле можно перемещать колесом мыши по вертикали.

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

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

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

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

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

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

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

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

        • Александр, скорее всего Вы вставляете шорткод в шаблон wordoress, а шорткоды работают только на страницах/записях. Для того, чтобы вставить шорткод в шаблон, его нужно вставлять с помощью php функции. А именно:

          где вместо [Shortcode] вставляете свой шорткод.

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

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

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

    • Артем, нужно добавить событие

      в самый первый div окна с классом parent_popup_click
      получится:

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

    • Сергей! Вы вставили стили CSS?

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

      • Вы знаете разобрался, когда копировал из CSS, не все скопировал. Извините моя ошибка!!!
        Можно такой вопрос – как вызвать это окно из скрипта PHP, скрипт PHP у меня в той же странице.

        • Это специальное окно на CSS. Что касается PHP – это слвсовсем другая история. Надо как минимум знать код скрипта. И это точно вопрос не к этой статье.

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *