Модальное окно css3: Как создать простое модальное окно на CSS

10 фрагментов модального окна на чистом CSS

Модальные окна всегда были областью JavaScript, и есть множество сценариев, которые можно попробовать.

Но с CSS3 создать модальное окно на чистом CSS еще проще. Эффекты несколько ограничены, но вы все равно можете получить отличный опыт, не полагаясь на сценарии.

Большинство этих примеров CSS разбросаны по разным уголкам сети, поэтому я собрал здесь некоторые из лучших. Они варьируются от простых фрагментов кода до более подробных библиотек, но все они имеют открытый исходный код и могут использоваться повторно.

1. CSS Modal

CSS Modal — один из лучших проектов для модальных окон, который можно найти на GitHub.Это совершенно бесплатная библиотека CSS для модальных окон с настраиваемой анимацией.

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

Не говоря уже о том, что это полностью адаптивно и работает на всех устройствах и экранах всех размеров. Установка очень проста, и эта штука даже поставляется с плагином Sass для загрузки.

2.Чистый CSS Modal

Вот еще одна модальная библиотека, которая мне очень нравится, также размещенная на GitHub. Это не только поддерживает затухающую анимацию, но и может появляться в поле зрения с любого направления.

Сам модальный дизайн довольно прост и, безусловно, можно использовать некоторые TLC. Но у него есть все основные функции, которые вам могут понадобиться, например, кнопка X для закрытия и достаточно места для хранения всего, что вы хотите (контент / изображения и т. Д.).

Также у этого есть важная функция, когда пользователь может коснуться фона страницы, чтобы скрыть модальное окно.Это не входит в каждый скрипт модального окна, но это краеугольный камень отличного UX.

Обязательно ознакомьтесь с этой библиотекой, если вам нужны эффекты анимации в модальных окнах. Это совершенно бесплатно, и более подробная информация о настройке содержится в репозитории GitHub.

3. Modalcss

Для действительно простого модального дизайна ознакомьтесь с репозиторием Modalcss, созданным Педро Лаксе. Этот немного старше, последние обновления были год назад (на момент написания этой статьи).

Но модальные окна по-прежнему работают так же хорошо, и нет причин думать, что модальные окна CSS потеряют поддержку браузера.Не говоря уже о том, что это было разработано, чтобы быть отзывчивым и ориентированным на мобильных пользователей с максимально простым UX.

Он поддерживает встраивание видео, хотя этот не поддерживает настраиваемые слайд-шоу.

Стоит использовать, если вам нужен простой дизайн с простой настройкой.

4. Чистый дизайн

С точки зрения эстетики этот модальный скрипт — один из моих любимых. Он был разработан пользователем GitHub LeoZhang и требует всего около 100 строк CSS.

Живая демонстрация на китайском языке, но, к счастью, вам не нужно читать содержимое, чтобы увидеть, как это работает.Все в дизайне просто фантастическое, от кнопки CTA до маленького значка X в верхнем углу (тоже чистый CSS).

Что мне не нравится, так это то, что вы не можете закрыть это, нажав на фон. Возможно, эту функцию можно было бы добавить, но в нынешнем виде без этой функции она кажется ограниченной.

Тем не менее, с великолепной анимацией и красивым дизайном, это отличный выбор для модального окна на чистом CSS.

5. Модальное окно HTML5 / CSS3

Разработчик Кэмерон Бэйни создал свою собственную версию модального HTML5 / CSS3 с довольно хорошими результатами.

Вы можете просмотреть исходный код здесь и взглянуть на живую демонстрацию, если хотите увидеть это в действии. Это очень простой эффект с анимацией слайда вниз и кнопкой «закрыть», а не значком X.

К сожалению, это репо не обновлялось более 4 лет, поэтому маловероятно, что разработчик будет обслуживать его. Но он хорошо работает как шаблон, который вы можете скопировать / вставить и изменить для своего собственного сайта.

6. Модальный от Фелипе Фиальо

Это модальное окно без JS использует селектор CSS : target для запуска модального окна и его закрытия.Это отличный способ обработки взаимодействия с пользователем с помощью чистого CSS, и он поддерживает старые браузеры, такие как Internet Explorer (в частности, IE9 +).

Удивительно, но этот модальный элемент является результатом целого пакета решений CSS, созданного разработчиком Фелипе Фиальо.

Это все совершенно бесплатно, и вы можете загрузить исходный код непосредственно для модальных окон, слайд-шоу, всплывающих подсказок и многого другого.

7. CSS-Modals

Frontend-разработчик Джон Убербахер бесплатно создал несколько CSS-модалов на GitHub.В этом нет ничего особенного, но они отлично выглядят и работают так, как ожидалось.

По умолчанию они поддерживают функцию скрытия щелчком, при которой вы можете щелкнуть фон, чтобы скрыть модальное окно. Эти модальные окна также адаптивны, хотя их сложно протестировать, поскольку демонстрация размещена на CodePen.

Тем не менее, установка довольно проста и требует лишь нескольких HTML-элементов с модальным контейнером. Отличный фрагмент для начала работы с очень простым модальным окном без излишеств.

8.Чистый CSS Modal Box

Для полной совместимости с браузером без ущерба для дизайна ознакомьтесь с этим модальным скриптом. Он полностью адаптивен и работает даже в таких старых браузерах, как IE7.

Демонстрация CodePen не совсем «красивая», но функциональная. Вы всегда можете взять этот код и сформировать его по своему усмотрению, что делает его отличной отправной точкой для любого веб-проекта.

Он поставляется с фиксированным модальным размером и встроенной полосой прокрутки, поэтому вы можете включать контент, длина которого превышает размер контейнера.Кроме того, он оснащен кнопкой закрытия и маленьким значком X в углу, которые функциональны и их легко перемещать по макету.

9. Базовый CSS

Я фанат минималистичного дизайна и стараюсь использовать его на всех своих сайтах. Этот стиль обычно больше ориентирован на взаимодействие с пользователем и создание простых, но интуитивно понятных интерфейсов.

Этот сценарий модального окна, созданный разработчиком Тимоти Лонгом, является фантастическим примером минимализма в действии.

Он работает, как и многие другие скрипты, и работает на чистом CSS.Хотя это не должно быть полным ответом на то, что я могу сказать, но это может быть просто проблема со средством просмотра CodePen.

Тем не менее, имея всего 90 строк CSS и 15 строк HTML, это должно быть легко воссоздать и даже расширить самостоятельно с помощью адаптивных стилей.

10. Очистить модальное окно

И последнее, но не менее важное — это простое модальное окно, созданное пользователем Beijing GitHub rodickmini. Кроме того, это очень просто: всего 40 строк CSS и около 10 строк HTML.

Это, наверное, самый маленький пример, который я видел, но он также очень прямолинейный и точный. Без анимации, без эффектов затухания, без эффектов скольжения.

При нажатии на кнопку-переключатель сразу отображается модальное и более темное наложение страницы. Он не поддерживает закрытие модального окна щелчком по фону, поэтому это элементарно, но это именно то, что некоторые разработчики выбирают для начального шаблона.

Но если это немного слишком на ваш вкус, то в этом списке обязательно найдется что-то, что вам подойдет.

Как изменить ширину модального окна начальной загрузки по умолчанию

Тема: Bootstrap / SassPrev | След.

Ответ: Установить ширину для

По умолчанию модальные окна Bootstrap доступны в четырех различных размерах — small, default, large и extra-large. Однако, если вы все же хотите настроить размер модального окна, вы можете переопределить свойство CSS width для .modal-dialog для изменения размера модального окна по умолчанию.

Точно так же вы можете переопределить свойство width классов .modal-sm , .modal-lg и .modal-xl , чтобы изменить размер маленького, большого и очень большого модального диалогового окна соответственно.

В следующем примере показано, как изменить ширину модального окна по умолчанию.

  




<ссылка rel = "таблица стилей" href = "css / bootstrap.min.css ">


<стиль>
    @media screen и (min-width: 676px) {
        .modal-dialog {
          максимальная ширина: 600 пикселей; / * Новая ширина модального окна по умолчанию * /
        }
    }




    
     Показать модальное окно по умолчанию 
    
    
    

        

            

                

                   
 Модальное окно по умолчанию 
 
                 × 
                
                

                    
 Модальный размер по умолчанию изменен на 600 пикселей.Теперь оно на 100 пикселей шире, чем предыдущее модальное окно шириной 500 пикселей. 
                
                

                     Хорошо, я понял 
                
            
        
    
 
  

Как вы можете видеть в приведенном выше примере, модальные классы помещаются внутри медиа-запроса CSS, так что модальное изменение размера применимо только тогда, когда область просмотра имеет определенную ширину для размещения модального окна.При установке пользовательской ширины для модального окна вы должны иметь в виду, что она не должна быть больше ширины области просмотра, в противном случае может возникнуть горизонтальная полоса прокрутки.

Связанные вопросы и ответы

Вот еще несколько часто задаваемых вопросов по этой теме:

4 способа создания модального всплывающего окна с помощью HTML, CSS и ванильного JavaScript

Недостаточно знать; Мы должны подать заявку.Одного желания недостаточно; Мы должны это сделать.

— Брюс Ли

Содержание

• Введение
• Образец 1
• Образец 2
• Образец 3
• Образец 4
• Заключение

Введение

При создании дизайна веб-страницы одним из наиболее важных моментов, которые следует учитывать, является интерактивность пользователя.Хорошим примером взаимодействия с пользователем является модальное окно.

Модальное окно обычно появляется в браузере как окно сообщения в зависимости от действия, выполняемого пользователем. Модальное окно бывает разных форм и форм, включая окно предупреждения, окно Flash-уведомления, диалоговое окно, лайтбокс. И т. Д.

Уникальная особенность модального окна заключается в том, что оно отключает главное окно в браузере, но сохраняет его видимым, при этом модальное окно отображается как дочернее окно перед веб-страницей.

Вот некоторые из важных случаев использования модального окна в приложении:

• Отображение предупреждений об определенных действиях, которые могут быть необратимыми.
• Flash-уведомления о новой информации.
• Увеличение взаимодействия с пользователем и вовлеченности.

Модалы тоже имеют свои недостатки, в том числе:

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

Теперь приступим к созданию модальных окон.

В ходе учебного курса мы создадим три файла: index.html, style.css и app.js , более четырех образцов. Затем мы даем подробную разбивку кода в каждом из этих файлов.

index.html

На приведенной выше странице разметки индекса у нас есть скрипт Font Awesome в теге head, который мы будем использовать внутри модального окна для отображения значка.Мы также связали страницы CSS и javascript на странице индекса.

В теле страницы индекса у нас есть несколько важных атрибутов HTML , таких как id , которые будут использоваться позже в нашем файле javascript для управления страницей.

Затем, наконец, в нашем теге кнопки у нас есть атрибут события onclick , который имеет функцию Alert , которая дает нам возможность отображать модальное сообщение на странице.

стиль.css

В файле style.css мы устанавливаем box-sizing нашей страницы на border-box . Это свойство позволяет нам включать отступы и границу в общую ширину и высоту элемента.

Затем мы стилизовали нашу кнопку с классом .btn . Это позволяет нам расположить кнопку, которая позволяет отображать модальное окно в центре страницы.

Наконец, используя #popUpBox, , мы можем разместить модальное окно в центре страницы.

С помощью свойства z — index мы можем расположить модальное окно перед другими элементами на странице.

Самая важная вещь, на которую следует обратить внимание в файле style.css , — это тот факт, что мы установили начальное состояние свойства display как none. Причина этого будет объяснена в файле app.js.

app.js

Здесь у нас есть глобальная переменная Alert, , которая создает экземпляр функции CustomAlert (). Внутри этой функции мы:

• Доступ к #popUpBox (id). При этом мы устанавливаем отображение как блок , который показывает модальное окно при нажатии тега button . Помните, что исходное состояние было установлено как none в файле CSS.
• Закрыл модальное окно, обратившись к closeModal (id) в файле HTML . Благодаря этому мы можем установить тег HTML Button с атрибутом события onclick . Там мы объявили функцию ok ().
• Наконец, ссылаясь на функцию ok () , мы устанавливаем для свойств CSS модального окна значение none при нажатии кнопки.

При этом у нас должен быть результат ниже:

Начнем с файлов index.html, style.css и app.js соответственно.

index.html

Из вышесказанного у нас есть соответствующие ссылки на наши файлы CSS и JavaScript .Затем в теле страницы индекса у нас есть тег input с типом Button .

У нас также есть атрибут события onclick с методом alert () , содержащим текст, который будет отображаться в модальном окне.

style.css

Здесь мы:

• Стилизовал нашу кнопку с классом .btn , который был объявлен в файле index.html
.
• Затем у нас есть идентификаторов modalContainer, alertBox, alertBox h2, alertBox p, alertBox #closeBtn. Все они созданы в файле app.js . Подход, отличный от того, как мы создавали модальное окно в Sample 1

app.js

Здесь мы разбиваем вещи на 6 частей:

• Сначала мы устанавливаем две глобальные переменные с именами closeModal и titleAlert , которые содержат текст, который будет отображаться в модальном окне.
• Мы объявили функцию createCustomAlert () .Здесь мы создаем тело нашего модального окна, отображаемое на странице.
• Затем мы создали div внутри тега body, присвоили ему modalContainer ID , а затем установили высоту равной высоте прокрутки страницы
.
• Затем был создан div для тела окна предупреждения. Мы присвоили ему alertBox ID . Затем мы устанавливаем модальное окно в центре страницы, а также устанавливаем видимость стиля.
• Затем мы устанавливаем заголовок модального окна, создав тег h2 .Затем текстовая переменная titleAlert добавляется к тегу h2 , чтобы отобразить «It Pops !!!» сообщение. Мы сделали что-то похожее на тело модального окна, создав тег p и назначив ему текстовый узел.
• Наконец, мы создали функцию с именем removeCustomAlert () , чтобы закрыть модальное окно. Мы делаем это, создавая тег a , добавляя к нему closeBtn ID и создавая обработчик события onclick , который ссылается на функцию, закрывающую модальное окно.

При этом у нас должен быть результат ниже:

index.html

На приведенной выше странице разметки индекса у нас есть скрипт Font Awesome в теге head, который мы будем использовать внутри модального окна для отображения значка. Мы также связали страницы CSS и javascript на странице индекса.

Также на странице объявлены две функции pop () , о которых мы будем говорить в приложении .js файл.

style.css

Стиль выше прост. Стоит отметить, что на начальном этапе мы установили для нашего #btn ID значение «none». Мы будем переключать свойство display в файле app.js .

app.js

Мы начинаем с установки глобальной переменной modal в значение null. Затем мы ссылаемся на функцию pop () из индекса .html , после этого мы устанавливаем условное состояние модального окна.

Если модальное окно сначала имеет значение null и по нему щелкают, мы устанавливаем отображение на блок и модальную переменную на true , чтобы показать модальное окно, и если нажата кнопка закрытия, мы затем устанавливаем отображение на none и модальная переменная на null , чтобы удалить модальное окно.

При этом у нас должен быть результат ниже:

индекс.html

Здесь мы будем использовать классов CSS вместо ID для управления состоянием нашего модального окна. У нас есть тег кнопки для показа модального окна и промежуток с буквой « X » для закрытия модального окна.

style.css

Здесь мы стилизовали нашу кнопку и модальное окно. Класс .modal имеет начальное состояние, видимость которого скрыта. Мы переключим это с помощью функции javascript, чтобы показать модальное окно.

app.js

Мы делаем три вещи из вышеперечисленного:

• Мы получаем доступ к нашим HTML-классам через querySelector. Метод querySelector () возвращает первый элемент, который соответствует указанным селекторам CSS в документе.
• Затем мы создали функцию toggleModal () , которая переключает класс show-modal в CSS.
• Затем, наконец, мы добавили прослушиватели событий к нашим функциям, чтобы переключать состояние модального окна в зависимости от определенного условия при нажатии кнопки.

При этом у нас должен быть результат ниже:

Заключение

Итак, реализация для наших 4 модалов. Вы можете стилизовать его по своему усмотрению и реализовать в любом проекте, над которым вы работаете. Я знаю, что дизайн может быть не лучшим, но цель статьи была больше сосредоточена на реализации javascript, чем на дизайне.

Ссылку на код можно найти здесь, на Github.

4 способа создания модального всплывающего окна с помощью HTML, CSS и ванильного JavaScript | автор: Deji Adesoga

В ходе обучения мы создадим три файла, индекс .html, style.css и app.js , более четырех образцов. Затем мы даем подробную разбивку кода в каждом из этих файлов.

index.html

На странице разметки индекса выше у нас есть сценарий Font Awesome в теге заголовка, который мы будем использовать внутри модального окна для отображения значка. Мы также связали страницы CSS и JavaScript на странице индекса.

В теле страницы индекса у нас есть несколько важных атрибутов HTML , таких как id , которые будут использоваться позже в нашем файле JavaScript для управления страницей.

Затем, наконец, в нашем теге кнопки у нас есть атрибут события onclick , который имеет функцию Alert , которая дает нам возможность отображать модальное сообщение на странице.

style.css

В файле style.css мы устанавливаем box-sizing нашей страницы на border-box . Это свойство позволяет нам включать отступы и границу в общую ширину и высоту элемента.

Затем мы стилизовали нашу кнопку с классом .btn . Это позволяет нам расположить кнопку, которая позволяет отображать модальное окно в центре страницы.

Наконец, с помощью #popUpBox, мы можем разместить модальное окно в центре страницы.

С помощью свойства z — index мы можем расположить модальное окно перед другими элементами на странице.

Самая важная вещь, на которую следует обратить внимание в файле style.css , — это тот факт, что мы установили начальное состояние свойства display как none. Причина этого будет объяснена в файле app.js.

app.js

Здесь у нас есть глобальная переменная с именем Alert, , которая создает экземпляр функции CustomAlert (). Внутри этой функции мы:

• Получили доступ к #popUpBox (id). При этом мы устанавливаем отображение как блок , который показывает модальное окно при нажатии тега button . Помните, что исходное состояние было установлено как none в файле CSS.
• Закрыл модальное окно, обратившись к closeModal (id) в файле HTML . Благодаря этому мы можем установить тег HTML Button с атрибутом события onclick . Там мы объявили функцию ok ().
• Наконец, обращаясь к функции ok () , мы устанавливаем для свойств CSS модального окна значение none при нажатии кнопки.

Таким образом, мы должны получить следующий результат:

10 лучших модальных компонентов в JavaScript и чистом CSS (обновление 2021 года)

Модальный компонент позволяет накладывать любое веб-содержимое (например, изображения, видео, текст, содержимое ajax) поверх веб-страницы.

В этом посте вы найдете 10 лучших и полностью бесплатных модальных компонентов, реализованных в jQuery, Native JavaScript и / или Pure CSS / CSS3. Я надеюсь тебе понравится.

Первоначально опубликовано 20 ноября 2017 г., обновлено 17 февраля 2021 г.

Содержание:

Модальные плагины jQuery:

Супер простые модальные всплывающие окна с переходами jQuery и CSS3

Модальный скрипт на основе jQuery / HTML5 / CSS3 для создания простых, отзывчивых, анимированных и многократно используемых модальных всплывающих окон на вашем веб-сайте / в приложении.

[Демо] [Скачать]

Размытие фона при открытии модального окна

Минимальное быстрое модальное окно на основе jQuery, которое использует фильтры CSS для размытия фона (основного содержимого) при открытии модального окна.

[Демо] [Скачать]

Открытие и воспроизведение видео Youtube в модальном режиме — jQuery GRT Youtube Popup

Еще один плагин jQuery для всплывающих окон Youtube, который позволяет помещать видео YouTube в адаптивное модальное окно с поддержкой автовоспроизведения.

[Демо] [Скачать]

Простой модальный плагин iFrame с jQuery — modallink

modallink — это простой, но полностью настраиваемый плагин, который позволяет отображать любые внешние ссылки в модальном всплывающем окне через iframe.

[Демо] [Скачать]

Создание динамических модальных файлов начальной загрузки 4 в jQuery — bootstrap-show-modal.js

Еще один плагин модальной оболочки Bootstrap 4, который позволяет создавать красивые, гибкие, динамические диалоговые окна с предупреждениями / подтверждениями и сложные модальные окна с использованием модального компонента Bootstrap 4.

[Демо] [Скачать]

Модальные компоненты Vanilla JS:

Простое модальное окно с эффектом размытия фона

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

[Демо] [Скачать]

Простейший модальный компонент в чистом JavaScript

Ультралегкий плагин JavaScript, который помогает создавать модальные окна для ваших веб-приложений.

[Демо] [Скачать]

Модальные компоненты на чистом CSS:

Минимальное адаптивное модальное окно на чистом CSS — modalcss

modalcss — это сверхлегкое решение CSS для создания простого адаптивного модального окна с анимацией CSS3. На основе чистого CSS и простой структуры html, без необходимости писать какие-либо уловки с флажками или переключателями, которые используются в других модальных решениях на чистом CSS.

[Демо] [Скачать]

Простой адаптивный модальный диалог только для CSS

Простой, отзывчивый модальный диалог, созданный с использованием флажков CSS и html.

[Демо] [Скачать]

Довольно простое модальное окно на чистом CSS

Мертвая простая библиотека CSS, которая позволяет создавать модальные окна с использованием чистого CSS / CSS3.