- :target
- Syntax
- Examples
- Оглавление
- HTML
- CSS
- Result
- Pure-CSS lightbox
- HTML
- CSS
- Result
- Specifications
- Bootstrap 4. Компонент «Модальное окно»
- Большое и маленькое модальное окно
- Активирование модального окна с помощью атрибутов
- Открытие модального окна с помощью JavaScript
- Параметры модального окна
- Метод modal() для активации и управления модальным окном
- События, связанные с модальным окном
:target
:target CSS псевдо-класс представляет собой уникальный элемент ( целевой элемент ) с id , соответствующим фрагментом в URL.
/ * Выбирает элемент с идентификатором, соответствующим фрагменту текущего URL * / :target < border: 2px solid black; >
Например, следующий URL имеет фрагмент (обозначенный знаком # ), который указывает на элемент с именем section2 :
http://www.example.com/index.html#section2 Следующий элемент будет выбран селектором :target , если текущий URL равен вышеуказанному:
Syntax
Examples
Оглавление
:target псевдо-класс может быть использован , чтобы выделить часть страницы , которая была связана с из таблицы содержимого.
HTML
h3>Table of Contents h3> ol> li>a href="#p1">Jump to the first paragraph! a> li> li>a href="#p2">Jump to the second paragraph! a> li> li>a href="#nowhere">This link goes nowhere, because the target doesn't exist. a> li> ol> h3>My Fun Article h3> p id="p1">You can target i>this paragraph i> using a URL fragment. Click on the link above to try out! p> p id="p2">This is i>another paragraph i>, also accessible from the links above. Isn't that delightful? p>
CSS
p:target < background-color: gold; > / * Добавляем псевдоэлемент внутри целевого элемента * / p:target::before < font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; > / * Стиль курсивным элементам внутри целевого элемента * / p:target i < color: red; >
Result
Pure-CSS lightbox
Вы можете использовать псевдокласс :target для создания лайтбокса без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После нацеливания CSS изменяет свое display так, чтобы они отображались.
Примечание. Более полный лайтбокс с чистым CSS, основанный на псевдоклассе :target ,доступен на GitHub ( demo ).
HTML
ul> li>a href="#example1">Open example #1 a> li> li>a href="#example2">Open example #2 a> li> ul> div class="lightbox" id="example1"> figure> a href="#" class="close"> a> figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. figcaption> figure> div> div class="lightbox" id="example2"> figure> a href="#" class="close"> a> figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. figcaption> figure> div>
CSS
/ * Неоткрытый лайтбокс * / .lightbox < display: none; > / * Открыт лайтбокс * / .lightbox:target < position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; > / * Содержимое лайтбокса * / .lightbox figcaption < width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; > / * Кнопка закрытия * / .lightbox .close < position: relative; display: block; > .lightbox .close::after < right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; > / * Наложение лайтбокса * / .lightbox .close::before < left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; >
Result
Specifications
Bootstrap 4. Компонент «Модальное окно»
Компонент предназначен для отображения на странице изначально скрытого контента. При появлении по какому-либо событию, модальное окно затемняет всю страницу и отображается поверх остальных элементов. Окно представляет собой контейнер, который содержит заголовок, основное содержимое и подвал.
type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-example"> Открыть модальное окно class="modal fade" id="modal-example" tabindex="-1" role="dialog" aria-hidden="true"> class="modal-dialog" role="document"> class="modal-content"> class="modal-header"> class="modal-title">Заголовок окна type="button" class="close" data-dismiss="modal" aria-label="Закрыть"> aria-hidden="true">× class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. class="modal-footer"> type="button" class="btn btn-primary"> Любая кнопка type="button" class="btn btn-secondary" data-dismiss="modal"> Закрыть
Чтобы убрать анимацию, которое сопровождает открытие модального окна, достаточно удалить у него css-класс fade .
Чтобы использовать систему сетку внутри модального окна, достаточно разместить в элементе с классом modal-body блок div с классом container-fluid .
Большое и маленькое модальное окно
class="btn btn-primary" data-toggle="modal" data-target="#modal-example-lg"> Большое окно class="btn btn-primary" data-toggle="modal" data-target="#modal-example-sm"> Маленькое окно
class="modal fade" id="modal-example-lg" tabindex="-1" role="dialog"> class="modal-dialog modal-lg" role="document"> class="modal-content"> class="modal-header"> class="modal-title">Заголовок окна type="button" class="close" data-dismiss="modal" aria-label="Закрыть"> aria-hidden="true">× class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
class="modal fade" id="modal-example-sm" tabindex="-1" role="dialog"> class="modal-dialog modal-sm" role="document"> class="modal-content"> class="modal-header"> class="modal-title">Заголовок окна type="button" class="close" data-dismiss="modal" aria-label="Закрыть"> aria-hidden="true">× class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.
Активирование модального окна с помощью атрибутов
Вызов модального окна можно привязать к кнопке или ссылке вообще без написания кода на языке JavaScript. Для этого необходимо указать атрибуты data-toggle и data-target для кнопки, которая открывает модальное окно:
- атрибут data-toggle=»modal» говорит о том, что кнопка предназначена для открытия окна
- атрибут data-target=»#modal-example» , который задает идентификатор модального окна
Открытие модального окна с помощью JavaScript
Для этого предназначен метод modal() :
href="#" class="btn btn-primary" id="show-modal">Открыть модальное окно class="modal fade" id="modal-example" tabindex="-1" role="dialog">
$(document).ready(function() // при нажатии на кнопку #show-modal $('#show-modal').click(function() // открыть модальное окно #modal-example $('#modal-example').modal('show'); >); >);
Параметры модального окна
Параметры позволяют настроить модальное окно, передача параметров возможна через атрибуты data или метод modal() .
| Параметр | Описание |
|---|---|
| backdrop | Значение по умолчанию: true . Накладывает темный фон над всем содержимым веб-страницы, поверх которого отображается модальное окно. У данного параметра есть дополнительное значение static , которое запрещает закрывать модальное окно при клике за его пределами. Параметр также можно установить с помощью атрибута data-backdrop . |
| keyboard | Значение по умолчанию: true . Закрывает модальное окно при нажатии клавиши Esc . Данный параметр также можно установить с помощью атрибута data-keyboard . |
| show | Значение по умолчанию: true . Отображает модальное окно сразу после его инициализации. Данный параметр также можно установить с помощью атрибута data-show . |
Метод modal() для активации и управления модальным окном
$('#modal-example').modal( backdrop: 'static', keyboard: false >);
Вызов modal(‘toggle’) переключает модальное окно, т.е. если модально окно открыто, то скрывает его. А если он скрыто, то отображает его.
Вызов modal(‘show’) открывает модальное окно.
Вызов modal(‘hide’) закрывает модальное окно.
Для примера, откроем модальное окно сразу после загрузки страницы:
$(window).on('load', function() $('#modal-example').modal( backdrop: 'static', keyboard: false >); >);
События, связанные с модальным окном
Событие show.bs.modal сработатывает при вызове метода show .
$('#modal-example').on('show.bs.modal', function() // что-то делаем. >);
Событие shown.bs.modal сработатывает после завершения работы метода show , то есть когда окно открыто, и все его CSS-стили загружены.
$('#modal-example').on('shown.bs.modal', function() // что-то делаем. >);
Событие hide.bs.modal сработатывает при вызове метода hide .
$('#modal-example').on('hide.bs.modal', function() // что-то делаем. >);
Событие hidden.bs.modal сработатывает после завершения работы метода hide .
$('#modal-example').on('hidden.bs.modal', function() // что-то делаем. >);
Если окно было открыто по событию клика, то элемент, открывший его, становится доступным через свойство события relatedTarget .
type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-example"> Открыть модальное окно class="modal fade" id="modal-example" tabindex="-1" role="dialog" aria-hidden="true"> .
$(document).ready(function() // событие при открытии модального окна $('#modal-example').on('show.bs.modal', function (e) if (e.relatedTarget == undefined) alert('Окно сейчас будет открыто без клика по элементу'); > else alert('Окно сейчас будет открыто после клика на ' + e.relatedTarget.nodeName); > >); >);
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 1С:Предприятие (31)
- API (29)
- Bash (43)
- CLI (100)
- CMS (139)
- CSS (50)
- Frontend (75)
- HTML (66)
- JavaScript (150)
- Laravel (72)
- Linux (147)
- MySQL (76)
- PHP (125)
- React.js (66)
- SSH (27)
- Ubuntu (68)
- Web-разработка (509)
- WordPress (73)
- Yii2 (69)
- БазаДанных (95)
- Битрикс (66)
- Блог (29)
- Верстка (43)
- ИнтернетМагаз… (84)
- КаталогТоваров (87)
- Класс (30)
- Клиент (27)
- Ключ (28)
- Команда (69)
- Компонент (60)
- Конфигурация (62)
- Корзина (32)
- ЛокальнаяСеть (28)
- Модуль (34)
- Навигация (31)
- Настройка (140)
- ПанельУправле… (29)
- Плагин (33)
- Пользователь (26)
- Практика (99)
- Сервер (74)
- Событие (27)
- Теория (105)
- Установка (66)
- Файл (47)
- Форма (58)
- Фреймворк (192)
- Функция (36)
- ШаблонСайта (68)