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

Видео урок: Решение задачи по созданию модального окна в карусели

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

Итак, вы справились с задачей? Нашли ли вы способ связать модальное окно со слайдом? Что ж, давайте я покажу вам, что получилось у меня. Итак, в первую очередь откройте тренировочный файл для предыдущего видео под названием "modalwindow.html". В нем находится код для модального окна. Его нужно добавить на нашу страницу внизу. Я вставила его на строке 129, после контейнера, но перед кодом JavaScript, и дала ему идентификатор hongkong. Этот текст будет отображаться в модальном окне. Здесь нет изображений, только текст. Название, два абзаца информации, а также кнопка "Close" внизу. Теперь давайте поднимемся выше, к строке 60. Здесь начинается код для второго слайда.

Итак, у нас есть блок div с классом carousel-caption, в котором находится заголовок h3. Далее я добавила параграф с тегом a с атрибутами href, который ссылается на идентификатор модального окна hongkong, и data-toggle со значением modal. Текст ссылки предлагает нам прочитать подробнее о Куан Тонг Лэндоне. Итак, теперь, когда я обновлю эту страницу в браузере, на втором слайде появится моя ссылка. И если вы нажмете на нее, должно открыться модальное окно. Обратите внимание, что карусель продолжает вращаться в фоновом режиме.

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