Простое модальное окно на JS

Для анимации появления и удаления модального окна используется CSS библиотека animate.css

Пример:

В примере использованы эффекты bounceIn для открытия (он в HTML) и bounceOutDown для закрытия (он в JS). Другие варианты можно выбрать из библиотеки animate.css

HTML:

CSS:

Добавляем animate.min.css или animate.css или только классы этой библиотеки, которые используем и:

JS:

Описание работы скрипта даны в комментариях

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

Похожие модальные окна реализует jQuery плагин animatedModal.js

Смотрите также:

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

Ваш комментарий отправлен!

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

  • Егор:

    Эта строка в HTML
    <a class="open_modal" href="#open">Открыть окно</a>
    что запускает? Куда ведет ссылка #open?
    У меня не получается собрать все это в работающий пример.
    Помогите разобраться. Или выложите сборку файлов с запуском из html.

    Ответить
    • Alexander:

      Строка запускает модальное окно, она может быть ссылкой или любым другим элементом.
      Если используется ссылка, то #open ведет в никуда, т.к. просто решетка будет кидать вверх страницы.
      Вот пример на codepen

      Ответить
      • Егор:

        Александр, спасибо за скорый ответ. Но у меня что то не запускается. Я правильно понял, что текст из CSS я подключаю через style, а JS подключаю через script type="text/javascript". HTML помещаю в body. Доп. библиотеку (animate.min.css) я подключаю через link как у вас. Я понимаю так, что class="open_modal" передает управление в скрипт и далее рулит уже он?

        Ответить
        • Егор:

          Все заработало, после того как я перенес link на animate.min.css и скрипт из head в body.
          Спасибо.

          Ответить
  • Виталий:

    Хорошее окно. Спасибо автору.

    Ответить
  • Алексей:

    А как сделать чтобы работала несколько ссылок на одной странице. Я сделал 3 ссылки, а работает только одна.

    Ответить
    • Alexander:

      А несколько и не будет…
      Тут все через ID сделано.
      Или окно одно, а только кнопок несколько?

      Ответить
      • Алексей:

        Да, окно одно а ссылок несколько. Как сделать?

        Ответить
        • Alexander:

          Поправил код в статье

          Ответить
          • Алексей:
            let body = document.getElementsByTagName('body')[0];[code]

            А для чего вот эта строчка?

            Ответить
            • Alexander:

              Определяем body, чтобы убрать и вернуть потом у него прокрутку.

              Ответить
  • Pavel:

    Добрый день! Спасибо за пример. Подскажите пожалуйста как правильно добавить скроллинг в это модальное окно?

    Ответить
    • Alexander:

      Можно так:

      .modal_txt {
      	max-height: calc(80vh — 100px);
      	overflow-y: auto;
      }
      Ответить
      • Pavel:

        Большое человеческое спасибо!

        Ответить
  • Игорь:

    Добрый день!
    Пробую поставить модальное окно, но у меня при открытии где-то чрз 2 сек. оно закрывается само и открывается на главная (то есть меня перебрасывает на главную страницу сайта)

    Подскажите, что мог сделать не так?
    Спасибо.

    Ответить
    • Alexander:

      Что то не так с ссылкой скорее всего. А если открыть через спан например?

      <span id="open_modal">Открыть окно</span>

      А вообще сложно без примера угадать

      Ответить
      • Игорь:

        Хорошо, спасибо, буду пробовать, если не получится, тогда отображусь с проблемой))

        Ответить
  • Кэт:

    Спасибо тебе огромное, ты чудо!!!

    Ответить