fbpx
Перейти к содержимому

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

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

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

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

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

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


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

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

HTML

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

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

Вариант 1

Больше статей:   Видео Youtube в всплывающем окне. Шорткод для Wordpress

Вариант 2

CSS

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

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

Больше статей:   🇯🇸 Cкрипт движущейся фотоленты для сайта

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

Больше статей:   Кнопка CSS3 с плавным переходом

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

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

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

а перед закрывающемся тегом </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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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