Как это устроено
Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.
- Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из , так что вместо этого прокручивается модальное содержимое.
- Клик по модальному «фону» автоматически закрывает модальный.
- Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
- В модальных окнах используется , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении в другой фиксированный элемент.
- Еще раз, из-за есть некоторые предостережения при использовании модальных окон на мобильных устройствах. для получения дополнительной информации.
- Из-за того, как HTML5 определяет свою семантику, не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:
Эффект анимации этого компонента зависит от медиазапроса . См. .
Продолжайте читать, чтобы увидеть демонстрации и инструкции по использованию.
Знакомство с inertСкопировать ссылку
— глобальный атрибут в HTML, позволяющий легко убирать и восстанавливать видимость интерактивных элементов, а также их возможность получать состояние фокуса. Вот пример:
Я намеренно избегаю использования для модального окна из-за многочисленных проблем с поддержкой.
Атрибут задан элементу , следующему сразу после модального окна сохранения изменений. Теперь всё содержимое не может попасть в фокус и по нему нельзя кликнуть.
Фокус ограничен рамками модального окна. Когда мы закрываем его, то убираем из . Этот способ управления ловушкой фокуса проще, чем другие методы.
Помните: событие закрытия модального окна может быть вызвано не только нажатием на кнопки внутри нашего модального окна из примера, но и при нажатии на Esc. А ещё некоторые модальные окна могут быть закрыты по клику на оверлей.
Поддержка Скопировать ссылку
Все последние версии , если включены экспериментальные функции веб-платформ. Также скоро появится его поддержка в Firefox! Единственное исключение — Safari, как мобильный, так и десктопный.
Мне бы очень хотелось, чтобы Apple реализовала встроенную поддержку . Хоть полифил и существует, но у него . Нехорошо!
Вдобавок хочется обратить внимание на :
Перемещение по DOM подразумевает, что JavaScript в полифиле требует высокой вычислительной мощности и, следовательно, в конечном итоге замедлит использование.
Для устройств с низким энергопотреблением, таких как бюджетные Android-смартфоны и устаревшие ноутбуки, а также тех, что выполняют сложные задачи (например, запуск нескольких приложений сразу), это может привести к зависанию или сбоям. Нативная браузерная поддержка делает такие процессы менее затратными в этом плане, так как у браузера есть доступ ко всем частям DOM, в отличие от JS.
SafariСкопировать ссылку
Лично я разочарован тем, что Apple не поддерживает . Хотя понимаю, что добавление новых функций в браузер — невероятно сложная и трудная работа. кажется функцией, которую Apple стоило бы начать поддерживать гораздо раньше.
macOS и iOS всегда имели хорошую поддержку доступности, а поддержка вспомогательных технологий — важная часть их маркетинговой кампании. Поддержка представляется как естественное продолжение миссии Apple ввиду того, что сама эта функция смогла бы облегчить разработку доступных веб-интерфейсов в разы.
К сожалению, Apple держит в тайне, когда появится поддержка этого атрибута. Поэтому поддержка — всё ещё открытый вопрос.
IgaliaСкопировать ссылку
Igalia — компания, работающая над функциями браузеров. Сейчас они проводят эксперимент, в котором каждый может проголосовать за те возможности браузеров, которые ему хотелось бы видеть. Конечно, моя статья совсем не про это, но вы можете узнать больше в Smashing Magazine.
Одно из предложений Igalia — это . Если вы искали возможность принять участие в улучшении доступности веба, но не знали с чего начать, я могу вам её предоставить. 5 $, 10 $, 25 $ — совсем необязательно жертвовать большие суммы, даже маленький вклад ценен.
Как создать и вызвать модальное окно?
Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице. Это выполняется программно.
Таким образом, для того чтобы создать его достаточно просто вызвать функцию :
var modal = $modal();
При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ позволяет установить содержимое, а – кнопки для отображения их в его нижней части (футере).
var modal = $modal({
title: 'Текст заголовка',
content: '<p>Содержимое модального окна...</p>',
footerButtons:
});
Все эти ключи являются не обязательными. Если не указать , то заголовок будет иметь название «Новое окно». Если не установить значению ключу , то модальное окно в этом случае создатся с пустым содержимым.
Ключ в отличие от и принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку. Она задаётся с помощью ключей , , . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов и . Если ключ вообще не указать, то в этом случае модальное окно будет создано без футера.
Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:
var modal = $modal({
title: 'Текст заголовка'
});
Пример создания модального окна с настройками по умолчанию:
var modal = $modal();
Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».
Но функция не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.
Для этого нужно создать переменную и присвоить ей результат выполнения функции .
В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:
- – для отображения модального окна;
- – для скрытия модального окна;
- – для удаления модального окна из DOM и связанных с ним обработчиков событий;
- – для установки контента;
- – для установки заголовка.
Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.
Рассмотрим, как работать с этими методами на примерах.
Например, метод используется когда вам необходимо показать (открыть) модальное окно:
modal.show();
Метод применяется для его скрытия:
modal.hide();
Методы и предназначены соответственно для изменения контента и заголовка модального окна после его создания.
modal.setContent('<p>Новое содержимое...</p>');
modal.setTitle('Текст нового заголовка');
В возвращаемом объекте также есть метод . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:
modal.destroy();
Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.
Шаг 3. Добавляем CSS для модального окна
Я пометила комментариями основные CSS-свойства. Вы можете изменить цвета, размеры и отступы чтобы подогнать внешний вид элементов под дизайн своего сайта.
PHP
/*CSS-свойства для заднего фона*/
.iw-modal {
opacity: 0; /*изначально этот блок должен быть прозрачным*/
background: rgba(0,0,0,0.7); /*задаём цвет фона*/
pointer-events: none; /*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
transition: all 0.5s ease;
margin: 0;
padding: 0;
}
.iw-modal:target {
opacity: 1; /*при клике блок становится видимым*/
pointer-events: auto; /*теперь по блоку можно кликать мышкой*/
overflow-y: auto; /*прокрутка по вертикли страницы*/
}
.iw-modal-wrapper {
margin:auto; /*выравниваем модальное окно по центру по горизонтали*/
margin-top:25vh; /*отступ сверху можно задавать в px, % или vh*/
}
/*CSS-свойства для блока, содержащего контент модального окна */
.iw-CSS-modal-inner {
position: relative;
background: #fff; /*цвет фона*/
border: 1px solid #ccc; /*цвет и толщина рамки*/
border-radius: 0px; /*радиус скругления углов*/
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
padding: 15px;/*внутренний отступ*/
background:#f1f1f1;/*цвет фона*/
position:relative;
}
.iw-modal-title {
font-size: 18px; /*размер шрифта*/
color:#555; /*цвет шрифта*/
font-weight:bold; /*жирность шрифта*/
line-height: 1.5; /*высота строки*/
margin-top: 0;
margin-bottom: 0;
}
/*CSS для кнопки закрытия*/
.iw-close {
position:absolute;
top:15px; /*отступ сверху*/
right:10px; /*отступ справа*/
font-size: 24px; /*размер шрифта*/
color: #555; /*цвет шрифта*/
text-decoration: none;
}
.iw-close:hover, .iw-close:focus {
color: #000; /*цвет шрифта при наведении*/
cursor: pointer;
}
/*CSS для блока с текстом*/
.iw-modal-text {
padding: 15px 20px; /*внутренний отступ*/
}
/**MEDIA**/
@media (min-width: 550px) {
.iw-modal-wrapper {
max-width: 500px;
}
}
|
1 |
/*CSS-свойства для заднего фона*/ .iw-modal{ opacity;/*изначально этот блок должен быть прозрачным*/ backgroundrgba(,,,0.7);/*задаём цвет фона*/ pointer-eventsnone;/*делаем чтобы по элементу нельзя было кликнуть когда он прозрачный*/ positionfixed; top; right; bottom; left; z-index9999; transitionall0.5sease; margin; padding; } .iw-modaltarget{ opacity1;/*при клике блок становится видимым*/ pointer-eventsauto;/*теперь по блоку можно кликать мышкой*/ overflow-yauto;/*прокрутка по вертикли страницы*/ } .iw-modal-wrapper{ marginauto;/*выравниваем модальное окно по центру по горизонтали*/ margin-top25vh;/*отступ сверху можно задавать в px, % или vh*/ } /*CSS-свойства для блока, содержащего контент модального окна */ .iw-CSS-modal-inner{ positionrelative; background#fff; /*цвет фона*/ border1pxsolid#ccc; /*цвет и толщина рамки*/ border-radius0px;/*радиус скругления углов*/ .iw-modal-header{ padding15px;/*внутренний отступ*/ background#f1f1f1;/*цвет фона*/ positionrelative; } .iw-modal-title{ font-size18px;/*размер шрифта*/ color#555; /*цвет шрифта*/ font-weightbold;/*жирность шрифта*/ line-height1.5;/*высота строки*/ margin-top; margin-bottom; } .iw-close{ positionabsolute; top15px;/*отступ сверху*/ right10px;/*отступ справа*/ font-size24px;/*размер шрифта*/ color#555; /*цвет шрифта*/ text-decorationnone; } .iw-closehover,.iw-closefocus{ color#000; /*цвет шрифта при наведении*/ cursorpointer; } .iw-modal-text{ padding15px20px;/*внутренний отступ*/ } @media(min-width550px){ .iw-modal-wrapper{ max-width500px; } } |
Сохраняем все файлы, в которые вы вносили изменения, обновляем страницу сайта и любуемся своим CSS модальным окном.
Подготовка материала
- Для правильного отображения модальных окон необходимо проверить включение поддержки сценариев JavaScript в используемом вами браузере.
- Эффект может не работать на бесплатных хостингах с минимальным набором предоставляемых услуг!
В зависимости от того, что Вы желаете разместить в модальных окнах, необходимо подготовить либо картинки или фотографии, либо видеоролик, либо текст. Изображения необходимо иметь в двух вариантах, большого и малого размеров. Это Вы поняли, посмотрев пример размещения окон. В образце, например, малые изображения имеют ширину 180px., а большие, соответственно, 600px. Размеры в дальнейшем можно изменять, кому как нравится. Изменить размеры изображений можно с помощью специальных программ, но проще всего это сделать в программе Adobe Photoshop или Paint.net:
|
Видеоролики можно вставлять как свои, используя для этой цели программы, например Microsoft Office SharePoint Designer 2007, Adobe Dreamweaver, сервисы, о которых рассказано на этой странице, так и из СЕТИ, просто скопировав КОД.
Для размещения текста (контента) в модальном окне необходимо вначале подготовить отдельный HTML-файл с необходимым текстовым материалом, картинками и прочим по желанию.
Так как мы будем рассматривать все три случая возможного использования модальных окон, поэтому предположим, что весь материал Вы подготовили.
Если у Вас пока нет своего материала, скачайте архив с файлами, которые также будут необходимы в нашем дальнейшем обучении:
|
Исходники (356 кб) |
Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.
Распакуйте архив в отдельную папку. Открыв эту папку с названием modalwindows Вы увидите папки code, fancybox, images.
В папке code содержатся шаблоны для вставки текста, видео и изображений. Папка fancybox содержит все ява-скрипты, картинки и таблицу стилей, а папка images тестовые изображения в двух вариантах, как говорилось ранее. Файл index.html — это полностью готовый файл, открыв который в браузере, Вы сможете увидеть все варианты окон в работе. Ну и файл content.html — это тот файл с контентом, о котором говорилось ранее.
|
При просмотре в различных браузерах возможны некоторые несовпадения и неправильное отображение, как, например, размер окна под видеоролик, а также проблемы с отображением текста (контента) в окне. Возможно отображение текста в «кракозябрах» в браузере при просмотре на компьютере и правильное отображение при закачке на сервер. Я думаю, что эти неприятности происходят из-за наличия разных кодировок и неправильных перекодировок. С файлами изображений ещё нормально, а вот с текстом есть некоторые заморочки. Если что не будет получаться с контентом попробуйте самостоятельно поэкспериментировать. |
На этом подготовка рабочего материала закончена.
Как сделать — Модальное окно
Узнать, как создать модальное окно с помощью CSS и JavaScript.
Модальный заголовок
Модальный нижний колонтитул
Шаг 1) Добавить HTML:
<!— Триггер/Открыть модальный —><button >Открыть модальный</button>
The <span> element with class=»close» should be used to close the modal.
Шаг 2) Добавить CSS:
/* Модальный (фон) */.modal <display: none; /* Скрыто по умолчанию */ position: fixed; /* Оставаться на месте */ z-index: 1; /* Сидеть на вершине */ left: 0; top: 0; width: 100%; /* Полная ширина */ height: 100%; /* Полная высота */ overflow: auto; /* Включите прокрутку, если это необходимо */ background-color: rgb(0,0,0); /* Цвет запасной вариант */ background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */ >
/* Модальное содержание/коробка */.modal-content <background-color: #fefefe; margin: 15% auto; /* 15% сверху и по центру */ padding: 20px; border: 1px solid #888; width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */>
/* Кнопка закрытия */ .close <color: #aaa; float: right; font-size: 28px; font-weight: bold;>
.close:hover, .close:focus <color: black; text-decoration: none; cursor: pointer;>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Добавить a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Шаг 3) Добавить JavaScript:
// Получить модальныйvar modal = document.getElementById(«myModal»);
// Получить кнопку, которая открывает модальныйvar btn = document.getElementById(«myBtn»);
// Получить элемент <span>, который закрывает модальныйvar span = document.getElementsByClassName(«close»);
// Когда пользователь нажимает на кнопку, откройте модальныйbtn.onclick = function() <modal.style.display = «block»;>
// Когда пользователь нажимает на <span> (x), закройте модальное окноspan.onclick = function() <modal.style.display = «none»;>
// Когда пользователь щелкает в любом месте за пределами модального, закройте егоwindow.onclick = function(event) <if (event.target == modal) <modal.style.display = «none»; >>
Добавить верхний и нижний колонтитулы
Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:
Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):
/* Модальный заголовок */.modal-header <padding: 2px 16px; background-color: #5cb85c; color: white;>
/* Модальное тело */ .modal-body
/* Модальный нижний колонтитул */.modal-footer <padding: 2px 16px; background-color: #5cb85c; color: white;>
/* Модальное содержание */.modal-content <position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); animation-name: animatetop; animation-duration: 0.4s>
решение
Многослойная модальная коробка
Как это решить? Сначала мы должны решить стиль, который добавлен последним., Это виновник, решение — добавить несколько строк кода:
Я напрямую устанавливаю, когда исчезает последнее модальное окно, напрямую очищаю оставшеесяс участием, Чтобы страница не добавлялась в конецСтиль, а значит, смещения страницы не будет.
Но в этот раз мы обнаружим, что, хотя страница не перемещается, но модальное окно кажется дрожащим, причина по-прежнему находится на полосе прокрутки:
- Когда мы добавляем приведенный выше код JavaScript, мы обнаруживаем, что при первом появлении модального окна исходная полоса прокрутки исчезает.
- Когда появляется второе модальное окно, смещение модального окна исчезает, и я хочу вернуться в исходное положение, но, к сожалению, полоса прокрутки вернулась. Модальное окно нужно сдвинуть вправо, но оно не передается Модальный блок устанавливается сам по себеОн был сдавлен, что напрямую вызвало дрожание модального кадра.
- И когда открывается первое модальное окно, полосы прокрутки нет, и это некрасиво, потому что маска модального окна полупрозрачна, и страница будет казаться пустой столбцом.
Чтобы решить эту проблему, нам также нужно написать строку кода на css:
Позволь мне объяснить, Этот стиль должен был быть открыт всеми:
- Когда модальное окно открыто, этот стиль будет добавлен автоматически. Наша полоса прокрутки также исчезает при открытии модального окна, поэтому нам нужно выбрать первое модальное окно и установить стиль при открытии первого модального окна плюс полоса прокрутки.
- Если вы выберете первое модальное окно напрямую без написания, Эффекта не будет, потому что без времениСтиль напрямую выполнен и написан, Стиль не будет выполнен, потому что, если модальное окно не открывается,Модальный фрейм этого иерархического отношения.
Позвольте мне поговорить о том, что означают эти две линии стиля:
- Прежде всегоЭтот атрибут: определяет, как будет обрабатываться содержимое области содержимого элемента переполнения.
- Если значение равно, Независимо от того, нужно ли это, пользовательский агент предоставит механизм прокрутки. Следовательно, полосы прокрутки могут появиться даже в том случае, если все содержимое можно разместить в поле элемента.
- соответствующий,с участиемСоответствуетОсь X и ось Y
Другими словами, мы устанавливаем вертикальную полосу прокрутки, которая появляется при открытии модального окна, и горизонтальную полосу прокрутки, которая скрывается, что устраняет ошибку, заключающуюся в том, что полоса прокрутки исчезает при открытии первого модального окна.
Таким образом, проблема, вызванная многослойным модальным фреймом, полностью решена.
Вышеупомянутое решение проблемы дрожания страницы, вызванного многослойным модальным окном, я надеюсь, это может вам помочь.
Теги и атрибуты
Интерактивным элементом для открытия диалогового окна должна выступать кнопка. Не , не не , не любой другой тег. Исключительно . И касается не только диалоговых окон, — самый надежный и доступный способ создавать интерактивные элементы на странице.
Простейшая реализация кнопки открывающая диалог по его id:
- Chromium — полная поддержка.
- Firefox — поддержка за флагом.
- Safari не поддерживает вовсе.
Вы, конечно, можете использовать и другой элемент для реализации диалогового окна, например так:
но тогда вам придётся самостоятельно реализовывать всё поведение описанное далее. В то время как с большую часть браузер реализует из коробки.
Шаг 1. Создаём разметку для модального окна
Данный фрагмент кода вы можете вывести в любом месте страницы, так как эти блоки всё равно будут позиционироваться поверх всех остальных.
Желательно вставить его в начале или в конце страницы.
PHP
<!—Разметка для модального окна—->
<div id=»iw-modal» class=»iw-modal»>
<div class=»iw-modal-wrapper»>
<div class=»iw-CSS-modal-inner»>
<div class=»iw-modal-header»>
<h3 class=»iw-modal-title»>Заголовок</h3>
<a href=»#close» title=»Закрыть» class=»iw-close»>×</a>
</div>
<div class=»iw-modal-text»>
<p>Здесь Вы можете разместить свой текст, изображения или формы обратной связи</p>
</div>
</div>
</div>
</div>
<!—end.Разметка для модального окна—->
|
1 |
<!—Разметкадлямодальногоокна—-> <div id=»iw-modal»class=»iw-modal»> <div class=»iw-modal-wrapper»> <div class=»iw-CSS-modal-inner»> <div class=»iw-modal-header»> <h3 class=»iw-modal-title»>Заголовок<h3> <ahref=»#close»title=»Закрыть»class=»iw-close»>×<a> <div> <div class=»iw-modal-text»> <p>ЗдесьВыможетеразместитьсвойтекст,изображенияилиформыобратнойсвязи<p> <div> <div> <div> <div> <!—end.Разметкадлямодальногоокна—-> |
Здесь вы можете изменить заголовок модального окна и его содержимое.
Заключение
Главным преимуществом нашего модального окна является то, что оно создано с использованием только HTML5 и CSS3
Почему это так важно? Как минимум они не замедляют сайт — т.к. используется десяток строк оформления
А создать модальное окно на Javascript — может даже новичок, т.к. существует масса готовых решений.
Теперь вы можете создать с помощью HTML5 и CSS3 простое модальное окно, которое можно использовать для формы входа или регистрации, рекламных блоков и многого другого.
Как добавить сайт в Google Search Console: инструкция для новичков
Как добавить сайт в Яндекс.Вебмастер: инструкция для новичков >
