Предыдущий ролик Следующий ролик  

Видео урок: Связывание миниатюр с модальными окнами

Bootstrap 3: добавь интерактивность на свой сайт

Таким образом, на данный момент у нас готов код для обеих частей этой страницы. Первая часть - это наши миниатюры. Галерея миниатюр начинается здесь, на 42-й строке, в блоке div с классом row. Здесь у нас есть неупорядоченный список, к каждому элементу которого добавлен класс thumbnail, который добавляет вокруг картинок аккуратную рамку и убирает маркеры. У нас также есть табличная разметка, которая располагает картинки либо по четыре в ряд при больших разрешениях, либо по две при меньших разрешениях.

И у нас есть километр разметки для модальных окон, которая начинается здесь, на 57-й строке. Окон всего семь, и каждое из них содержит дополнительную информацию о членах команды. Здесь находится вся наша замечательная разметка для заголовков, тел и футеров модальных окон. Но мы еще не связали окна с миниатюрами. Если сейчас мы откроем страницу, то увидим миниатюры, но при нажатии на них ничего не произойдет. Таким образом, в этом видео мы свяжем окна с миниатюрами.

Для этого мы вернемся к нашей разметке для миниатюр, которая начинается на строке 44. Мы собираемся добавить в код два очень важных элемента, которые создадут связь между модальными окнами и миниатюрами. Итак, на строке 44 есть атрибут href, который содержит знак решетки. Решетка обычно используется в качестве заполнителя, только для того, чтобы указать, что здесь должна быть ссылка, но она на самом деле никуда не ведет. Она используется только в целях демонстрации. Мы же подставим в этот атрибут href идентификатор модального окна, который находится ниже. Вот, например, идентификатор нашего первого модального окна.

Помните, как я изначально создавала эту разметку? Например, на 58-й строке я присвоила блоку div идентификатор landon. Именно этот ID и будет указывать, что должно появиться при нажатии миниатюры. Идентификаторы я создавала по одному и тому же принципу. Для каждого члена команды используется его фамилия, записанная строчными буквами. Так что вам даже не придется прокручивать страницу вниз, чтобы узнать все идентификаторы. Вы сможете сразу записать их в разметку для миниатюр.

Итак, в этом теге a href мы введем #landon. И конечно, мы ставим решетку, потому что перед идентификатором всегда должна стоять решетка или, как ее еще называют, хэш-тег. Таким образом, я добавлю идентификаторы во все теги: Forteau, Nuan, Perfington, Tristener, Veladoner и Wandaleere.

Что ж, хорошо. Однако прямо сейчас все равно ничего не будет происходить. Мы указали, какой блок мы хотим загружать при нажатии той или иной миниатюры, но не добавили код, благодаря которому это будет работать, а для этого нам нужен JavaScript. Таким образом, здесь нам понадобится еще один атрибут данных. Внутри тега a href мы добавим атрибут data-toggle со значением "modal" в кавычках. Он сообщит JavaScript, что нужно загрузить код, отображающий на странице модальное окно.

Теперь при нажатии на миниатюру будет вызываться код JavaScript для модального окна. И это окно будет заполняться контентом из блока с идентификатором landon. Итак, я скопирую этот последний атрибут, потому что data-toggle со значением modal будет одним и тем же для всех ссылок, и добавлю его в каждый тег a href. Просто вставьте его во все ссылки и сохраните страницу. Теперь, когда я вернусь в браузер и обновлю страницу, с первого взгляда мы не увидим в ней никаких изменений.

Страница выглядит по-прежнему, на ней находятся только миниатюры. Но теперь, если я нажму на одну из них, на экране появится модальное окно. Оно содержит картинку, текст и кнопки, позволяющие его закрыть. Здесь у нас есть небольшие проблемы с форматированием. Например, этому изображению присвоен класс pull-left, а это плавающий класс. Поэтому у нас определенно есть проблема с обтеканием изображения. Каждый раз, когда вы используете плавающий класс, вы должны отменять обтекание с помощью тега clear. В данном случае мы его не использовали, так что кнопка "Сlose" и линия находятся здесь, справа от картинки.

Если бы мы применили тег clear, то текст с кнопкой сместились бы немного ниже. Как я уже говорила, наша кнопка "Сlose" вызывает JavaScript, чтобы закрывать модальное окно, поэтому мы можем нажать на нее, и окно исчезнет. Если я нажму на другую картинку, а потом - на крестик в верхнем правом углу, модальное окно тоже исчезнет. Итак, если вы просмотрите все эти окна, вы увидите, что базовый макет здесь реализован. Определенно, у нас есть некоторые проблемы с оформлением, например, на странице Джонатана Перфингтона.

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