Всплывающее окно на 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:

[:en]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:

48 комментариев для “Всплывающее окно на CSS”

  1. Спасибо, помогли. А можно ли как-то сделать, чтобы ссылка, вызывающая окно, была не текст, а картинка? И можно ли в текст всплывающего окна вставлять картинки?

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

    ×
    Some text in the Modal..

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

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

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

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

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

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

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

      1. Привет! Вставляю в форму скрипт обратной связи для сайта, при исполнении файла .php на странице показывается его содержимое а сам скрипт не исполняется. В чем проблема? Напишите плиз на мой e-mail

        1. Николай, напишите мне на e-mail:
          – какая форма обратной связи
          – движок сайта
          – не сбились ли теги окна (при изменении тегов скрипт не работает)

  7. Александр

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

      1. Александр

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

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

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

          1. Александр

            Спасибо. Разобрался. Ранее вставлял в php. Как оказалось пришлось не много подкорректировать functions.php .

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

    1. Саша, какое именно окно Вы используете?
      В статье два варианта:
      – окно появляется при нажатии;
      – окно появляется при загрузке страницы (при входе).

  9. Александр

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

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

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

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

      1. у меня, в таком случае, окно закрывается при нажатии на любую часть экрана (даже при нажатии на ссылку или управляемый скрипт в самом окне), подскажите, пожалуйста, как сделать, чтобы окно закрывалось именно при на нажатии на затененную часть, т.е. “мимо” окна?

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

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

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

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

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

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

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

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

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

  16. Николай

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

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

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