Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее. Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.
Способ №1. Дешево и сердито. Идея проста — необходимо поместить по центру картинку, которая будет показывать пользователю, что страница все еще загружается. Код довольно прост, пишем сразу после :
В результате у нас сразу после загрузки появляется блок с анимированным прогрессбаром по центру страницы. Параметр overflow нужно менять для того, чтобы не появилась полоса прокрутки и пользователь не мог прокрутить вниз и поглядеть на содержимое странички.
Потом, когда все загрузилось — нужно убрать прелоадер и установить overflow в положение visible.
Эту часть кода я поместил в файл с JS-функциями, plreloader1.js
Если делать прогрессбар из анимированного GIF-рисунка, то он может получиться слишком тяжелым, порой даже больше самой странички, где его размещают. Поэтому лучше нарисовать полоску (например, такую), поставить ее как фон у блока с ID preloader и двигать бекграунд-позишн по таймеру.
У этого способа есть недостатки — Если ставить скрытие прелоадера на onload, т.е. когда ждать, пока загрузятся все картинки, то пользователь может подумать, что страница просто зависла — фактически кроме анимации ничего не происходит. Если же вешать на $(document).ready() из jQuery, то после исчезновения прелоадера картинки только будут подгружаться.
Поэтому предлагается использовать…
Способ №2. Истина где-то рядом, или джедаи наносят ответный удар. Для начала нарисуем 2 полосы загрузки — активную и не очень.
Поставим неактивную как фон, а активную сделаем фоном у дива, для которого будем менять ширину в зависимости от процента загрузки.
progbar_ph.jpg – это картинка высотой в 1 пиксель и шириной с нашу полосу прокрутки (данный пример глючит без нее в IE, и я пока не нашел другого способа выровнять по центру див с прогрессбаром). Стили такие же, как и в предыдущем способе, разве что
Теперь осталось сделать небольшой скрипт, который будет динамически подгружать содержимое сайта и картинки. Он нужен для того, чтобы прогрессбар показывался и изменялся еще до того, как скачается используемый фреймворк и другие JS-файлы.
грузится HTML-код
начинают грузиться картинки
затем некий фреймворк
дополнительные JS-файлы (хотя лучше все склеить в один)
запускается некая функция (или несколько), которая стягивает дополнительный контент.
Я реализовал 2 метода — первый простой, включается так: непосредственно перед
пишем:
Первым параметром идет идентификатор блока с активной полосой загрузки в качестве фона, вторым — ширина картинки, третий параметр — это метод, которым будем считать вес контента.
Скрипт сканирует все картинки на страницы и назначает им вес равный 1. Все JS-файлы прописываются в его теле, как я расскажу чуть ниже. Однако хочется, чтобы вес у каждой единицы контента был не единицей, а реальным объемом в байтах. Да и для AJAX-приложений хотелось бы сразу подгрузить всю графику.
Для этого я написал скрипт на PHP, который сканирует папку с картинками оформления и заносит это все дело с размерами файлов в массив, опционально сжимая.
Так что дописав перед следущее, мы получим прогрессбар, который будет показывать ход загрузки всего контента на странице, после чего плавно исчезнет.
Когда загрузились все JS-файлы, запускаются функции, которые есть в массиве invoke. Если мы с помощью jQuery подгружаем контент, то функция будет выглядить так:
PHP-скрипт делает следующее: он заносит в массив необходимые скрипты с их размерами, а так же картинки и дополнительные функции. Код:
Уже после того, как загрузились все картинки и JS-файлы, вызывается событие onLoad, которое вы указали в функции dLoader.start()
Еще есть способ кастомизации процесса загрузки:
Для того, чтобы использовать это, нужно отредактировать PHP-скрипт, прописав в нем свои пути и JS-библиотеки, затем запустить его, чтобы он сгенерировал скрипт загрузчика, который потом нужно прописать в единственным скриптом. Работающий пример второго варианта лежит здесь.
Архив со скриптами можно взять отсюда, ну а посмотреть, как это все работает — на моем сайте.
Работает в Internet Explorer 6/7, Firefox 3, Opera 9.5, Safari 3.2.1
Пожелания и предложения приветствуются :)
Спасибо за помощь в подготовке статьи waitekk отсыпьте ему кармы а мне еще травы
Как создать прелоадер страницы
На самом деле создать прелоадер очень просто.
Для этого нужно сразу после открывающего тега body добавить код (HTML структуру прелоадера). С помощью CSS его необходимо настроить так, чтобы он занимал всю область viewport и находился над содержимым страницы. В качестве прелодера обычно используют анимированную картинку (svg, gif), или CSS-анимацию.
В процессе загрузки страницы её контент находится под прелодером. Пользователь видит только анимированную картинку.
После полной загрузки прелоадер необходимо скрыть. Чтобы это осуществить необходимо написать очень маленький скрипт. Это можно выполнить как на чистом JavaScript, так и с использованием библиотеки jQuery .
Прелоадер на чистом CSS
Этапы создания прелодера на чистом CSS:
1. Добавить после открывающего тега body следующий HTML-код:
Элемент .preloader – это контейнер, который будет занимать всю область просмотра и находится над содержимым страницы. .preloader__row и .preloader__item – необходимы для создания CSS-анимации, которую отобразим в центре viewport.
2. Создать следующие стили:
Размещение прелоадера над контентом осуществляется посредством задания ему фиксированного позиционирования и CSS-свойства z-index .
3. Вставить сценарий, который будет добавлять к элементу body класс loaded после полной загрузки страницы:
Этот скрипт очень резко скрывает прелоадер. Чтобы этот процесс улучшить, а именно выполнить это с анимацией можно использовать вместо вышеприведённого сценария этот:
Прелоадер в виде анимированной svg иконки
Процесс создания прелоадера в виде анимированной svg иконки не будет сильно отличаться от примера с использованием CSS-анимации.
1. Создадим HTML-разметку прелоадера и разместим её сразу же после открывающего тега body :
В качестве svg можно использовать любое другое изображение.
3. Поместим на страницу следующий сценарий:
Этот сценарий на чистом JavaScript. Но его можно написать с использованием библиотеки jQuery.
В этом случае он будет выглядеть следующим образом:
Пример прелоадера с градиентным фоном:
Прелоадер с использованием анимированной gif картинки
В качестве изображения можно использовать не только svg, но и gif картинку.
CSS для прелоадера:
Небольшая коллекция анимированных gif-изображений имеется в этом архиве.
Вариант прелоадера с использованием jQuery функции fadeOut
Пример скрипта нв jQuery для скрытия прелоадере с использованием функции fadeOut:
Кнопка отправки со спиннером
Рассмотрим создание формы, работающей через AJAX. При её отправке будем переводить кнопку type="submit" в состояние disabled и показывать спиннер. Спиннер будем отображать до тех пор пока не прийдет ответ от сервера. Тем самым спиннер будет указывать что действие все ещё выполняется и оно не завершено.
Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .
При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).
Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляют при нажатии на кнопку или ссылку.
Изображение модального окна:
Оно состоит из заголовка (хедера), основной части и футера.
В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части распологают содержимое, а в футере кнопки для выполнения различных действий.
Загрузка и установка модального окна
Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.
Процесс установки модального окна на страницу выполняется посредством подключения к ней его CSS и JavaScript файлов, или добавления их содержимого в соответствующие свои файлы.
Как создать и вызвать модальное окно
Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.
Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :
При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).
Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.
Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.
Пример создания модального окна с настройками по умолчанию:
Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».
Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.
Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .
В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:
show – для отображения модального окна;
hide – для скрытия модального окна;
destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
setContent – для установки контента;
setTitle – для установки заголовка.
Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.
Рассмотрим, как работать с этими методами на примерах.
Например, метод show используется когда вам необходимо показать (открыть) модальное окно:
Метод hide применяется для его скрытия:
Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.
В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:
Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.
Примеры использования скрипта для создания модальных окон
1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.
2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle="modal" ):
3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:
4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:
5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:
6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:
Пример содержимого файла «json-1»:
7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:
Описание скрипта модального окна
В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.
Её JavaScript код представлен посредством функции $modal :
В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .
В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .
Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :
Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:
Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах - false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.
Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).
Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.
Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.
Я занимаюсь сайтами уже долгое время, и одной из своих слабых сторон до, так скажем, этой статьи я считал модальные окна. Я не приверженец готовых решений в виде громоздких модулей или плагинов, поэтому в большинстве случаев стараюсь писать и использовать свои наработки.
Долго я мучился, прописывая массу условий в CSS для различных экранов, пытаясь добиться адекватной адаптивности, и вот наконец вывел для себя формулу идеального (на мой взгляд) адаптивного и самое главное – простого модального окна, которым с удовольствием с вами сегодня поделюсь.
Наше модальное окно будет состоять из четырех элементов: верстки (HTML) самого окна и ссылки для его вызова, визуальной составляющей (CSS) и скрипта (jQuery), позволяющего нам вызывать и закрывать модальное окно по клику на нужный объект.
Перед тем как приступить, по традиции визуально покажу то, что в итоге у вас должно получиться:
Как вам? По-моему, более чем достаточно для того, чтобы на основе этого воплощать уже свои идеи.
Установка модального окна на сайт
Итак, что касается верстки модального окна, то она у нас выглядит следующим образом:
В окне я разместил кнопку закрытия, заголовок и его содержимое (собственно все, как на скриншоте). По необходимости, которая, скорее всего, у вас может возникнуть, текст (как и заголовок) вы можете заменить, например, на видео, форму обратной связи, изображение или любой другой нужный вам элемент вашего веб-проекта.
Кнопка (в моем случае ссылка) вызова модального окна:
Визуальная составляющая (CSS):
И, непосредственно, скрипт вызова и закрытия модального окна:
Два последних блока кода вы вставляете в соответствующие файлы вашего сайта. Не забывайте про подключение библиотеки jQuery, если она отсутствует на вашем сайте. На этом установка заканчивается.
На что здесь стоит обратить внимание?
Высота модального окна автоматическая и зависит от его содержимого. Если высота модального окна превышает высоту экрана, ему добавляется вертикальная прокрутка.
Связь кнопки вызова модального окна с самим окном настраивается посредством наличия атрибута «data-modal» у обоих составляющих с одинаковым содержимым (в нашем случае - это «test»).
У элемента (это не обязательно должна быть ссылка), вызывающего модальное окно, обязательно должен быть прописан класс «modal-link».
Закрытие окна происходит путем нажатия на соответствующую кнопку и его фон.
Модальное окно можно внедрить на любую CMS (WordPress, Joomla!, 1С-Bitrix, DataLife Engine и другие). Хотя, если говорить о DLE, то в ней уже заложен функционал модальных окон. Подробнее это этом здесь.
На этом всё, чем я хотел с вами сегодня поделиться. Если какие-то моменты для вас показались сложными – пишите об этом в комментариях под данным постом.
В этой статье разберём js-компонент фреймворка Bootstrap под названием Modal , который предназначен для создания на сайте модальных окон. Научимся его настраивать и использовать для решения различных задач.
О компоненте Bootstrap Modal
Modal – это компонент фреймворка Bootstrap, написанный с использованием JavaScript и предназначенный для добавления на сайт диалоговых окон и отображения в них различного контента.
При открытии модального окна над содержимым страницы помещается «фон», который затемняет её и блокирует с ней любые взаимодействия.
Всплывающее окно можно применить на сайте для разных целей. Например, для отображения регистрационной формы, изображения в увеличенном масштабе, какого-то важного события, произошедшего на сайте или чего-то другого.
Основные сведения о компоненте Modal :
код состоит из HTML, CSS и JavaScript;
располагается над остальным содержимым, при открытии убирает прокрутку у посредством добавления к нему overflow:hidden (это необходимо для обеспечения прокрутки контента модального окна, а не страницы);
клик на модальном «фоне» закрывает окно;
нельзя открыть одновременно несколько окон, вложенность не поддерживается;
HTML-код модального окна желательно поместить непосредственно в без вложения его в другие элементы (особенно с position:fixed );
некоторые iOS и Android устройства имеют весьма ограниченную поддержку overflow:hidden на , из-за этого имеется баг: при прокручивании контента модального окна прокручивается также содержимое ;
в Bootstrap 5 в отличие от предыдущих версий компонент написан на чистом JavaScript без использования jQuery.
Для установки фокуса на элемент в модальном окне используйте метод focus() :
Структура модального окна
Вёрстка модального окна выполняется с использованием следующих классов:
Базовый HTML-код модального окна на Bootstrap 5:
Базовый HTML-код модального окна на Bootstrap 4 (отличается от предыдущего только кнопкой закрытия):
В HTML работа с модальных окном сводится к копированию базового кода, добавлению ему id , изменению заголовка, наполнению тела нужным контентом и при необходимости к добавлению в футер определённых кнопок.
Открытие модального окна при нажатии на кнопку
Открытие модального окна обычно осуществляется при наступлении какого-то события, например, при нажатии на кнопку. При этом это можно сделать как с помощью JavaScript, так и без написания кода (с помощью data-атрибутов).
С помощью data-атрибутов
Например, создадим кнопку для которой с помощью data-атрибутов укажем действие, которое она будет выполнять.
Атрибуты Bootstrap 5 для управления Modal:
В третьей и четвёртой версии этого фреймворка для этого тоже используются два атрибута, но с немного другими именами:
С помощью JavaScript
Пример кода на чистом JavaScript для открытия модального окна на Bootstrap 5:
В третьей и четвёртой версии данного фреймворка открытие модального окна выполняется посредством вызова modal("show") :
Настройка модального окна
С помощью классов
1. Прокрутка тела
По умолчанию модальное окно прокручивается, когда выходит за пределы области просмотра. Но если вы хотите чтобы прокручивалось не само модальное окно, а его тело то добавьте к .modal-dialog класс modal-dialog-scrollable :
2. Отображение в центре экрана
По умолчанию модальное окно отображается в верхней части экрана, если нужно по центру то добавьте к .modal-dialog класс modal-dialog-centered :
3. Отключение анимации
За анимацию отвечает класс fade , если она не нужна, то просто удалите его:
4. Изменение ширины модального окна
По умолчанию максимальная ширина модального окна 500px . При необходимости это значение можно переопределить посредством добавления к .modal-dialog одного из следующих классов:
Например, увеличим максимальную ширину модального окна до 1140px:
5. На весь экран (только в Bootstrap 5)
Для того чтобы всплывающее модальное окно занимала всю область просмотра добавьте один из следующих классов к .modal-dialog :
modal-fullscreen – для всех экранов;
modal-fullscreen-sm-down – только когда viewport меньше 576px;
modal-fullscreen-md-down – меньше 768px;
modal-fullscreen-lg-down – меньше 992px;
modal-fullscreen-xl-down – меньше 1200px;
modal-fullscreen-xxl-down – меньше 1400px.
С помощью data-атрибутов
В Bootstrap имеются следующие настройки:
backdrop – при открытии modal по умолчанию ( true ) происходит помещение «фона» над контентом страницы, при нажатии на него происходит закрытие модального окна; false – без фона; 'static' – со статическими «фоном», modal не закрывается при нажатии за его пределами;
keyboard – позволяет закрыть modal при нажатии клавиши Esc (по умолчанию – true );
focus – при инициализации устанавливает фокус на модальное окно (по умолчанию – true );
show (в пятой версии нет) – открывает окно сразу после его активирования (по умолчанию – true );
Установить эти параметры можно как с помощью JavaScript, так и посредством data-атрибутов.
В Bootstrap 5 атрибут пишется с префиксом data-bs-* , в третьей и четвёртой версии – с data-* .
Например, параметр backdrop в пятой версии пишется так: data-bs-backdrop="static" . А в третьей и предыдущей версии так: data-backdrop="static" .
Пример. По умолчанию всплывающее окно закрывается, когда мы кликаем на модальный «фон» или нажимаем клавишу Esc. Чтобы эти действия запретить, к .modal можно добавить следующих два data-атрибута:
Добавление доступности (aria-атрибутов)
Добавление всплывающему окну доступности, предназначенной для вспомогательных технологий (экранных дикторов и других пользовательских агентов), осуществляется с помощью атрибутов ARIA.
Обязательно добавьте aria-labelledby=". " , в котором укажите идентификатор модального заголовка.
Кроме этого, вы можете добавить описание к modal посредством атрибута aria-describedby , который необходимо добавить к .modal .
Обратите внимание, что в четвёртой и пятой версии не нужно добавлять атрибут role="dialog" к .modal-dialog . Он добавляется в этих версиях с помощью JavaScript.
Т.к. по умолчанию modal не открыто, то чтобы это сообщить с помощью стандарта WAI-ARIA добавьте aria-hidden="true" к элементу .modal .
Описание ролей и свойств ARIA:
role="dialog" – элемент, выступающий в роли диалога (окно, которое предназначено для прерывания текущей работы приложения с целью запроса у пользователя некоторой информацию или требующей от него ответа).
aria-labelledby=". " – предназначен для идентификации элемента (или элементов), который содержат краткое название текущего элемента.
aria-describedby=". " – предназначен для идентификации элемента (или элементов), который содержит подробное описание текущего объекта.
aria-hidden="true" – указывает, что элемент и все его потомки не видимы пользователю.
aria-label=". " – содержит описание текущего элемента.
Методы Modal в Bootstrap 4
В третьей и четвёртой версии фреймворка активировать контент как модальное перед тем как вызывать его методы не необязательно. В основном это может понадобиться, когда его нужно настроить с помощью параметров:
Все параметры описаны в разделе, где мы рассматривали настройку modal с помощью data-атрибутов.
При этом желательно сохранить полученный элемент в переменную (как показано в примере выше), чтобы для выполнения следующих операций над modal его заново не получать:
Если в переменную не сохранить элемент, то нам придётся его каждый раз получать:
Этот код можно улучшить если сохранить выбранный элемент в переменную:
Методы Modal в Bootstrap 5
В Bootstrap 5 перед тем, как вызывать методы modal его необходимо сначала активировать:
Настройка Modal осуществляется путем передачи во второй аргумент необходимых параметров в формате объекта:
modal.show() – открыть модальное окно;
modal.hide() – закрыть;
modal.toggle() – переключить;
modal.handleUpdate() – обновить положение открытого окна;
modal.dispose() – уничтожить модальное окно.
Пример, в котором будем показывать то или иное содержимое в модальном окне (в зависимости от значения атрибута data-list ):
Если при открытии modal меняется его высота, то вы можете вручную обновить его положение посредством вызова метода handleUpdate() :
События
В Bootstrap генерируется несколько событий для модальных окон. Используя их вы можете добавить свой код, который будет выполняться при их наступлении.
Инициируются события на элементе .modal .
В третьей и четвёртой версии:
Результат вышепредставленного примера представим в виде следующих изображений:
2. Использование сетки Bootstrap для разметки содержимого модального окна
Для того чтобы использовать систему сеток платформы Bootstrap 3 или 4 внутри модального окна, достаточно разместить в элементе, имеющего класс .modal-body блок div с классом .container-fluid . После этого можно переходить к созданию необходимой разметки, используя классы системы сеток внутри этого контейнера по обычным правилам.
3. Переключение между 2 модальными окнами
Для того чтобы осуществить открытие из одного модального окна другого (при этом текущее модальное окно должно быть закрыто), на страницу необходимо добавить следующий скрипт:
JavaScript сценарий, который необходимо добавить на страницу, после подключения библиотеки jQuery и boostrap.min.js .
Пример HTML-кода, состоящего из 2 модальных окон:
Пример переключения между двумя модальными окнами можно посмотреть в песочнице.
4. Например, создать модальное окно, которое в зависимости от нажатой кнопки имеет то или иное содержимое.
