Как открыть другое модальное окно, находящееся внутри списка?

Опубликовано: 5 Января, 2022

Каскадные таблицы стилей - это язык таблиц стилей, используемый вместе с HTML и JavaScript для создания веб-приложений. Фреймворки CSS предоставляют библиотеку, позволяющую упростить стандартизованное веб-проектирование. Одним из таких фреймворков CSS является Bootstrap 4. Bootstrap 4 является наиболее часто используемым фреймворком CSS из-за его простоты и встроенной библиотеки, которая предлагает широкий спектр компонентов и утилит, необходимых для разработки интерактивного пользовательского интерфейса.

Список и модальные окна относятся к широкому спектру предопределенных компонентов в Bootstrap 4. Модальные окна основаны на сочетании HTML, CSS и JavaScript. Модальные окна располагаются над родительским элементом, который инициировал его в документе, и их можно удалить, щелкнув параметры закрытия, присутствующие в модальном окне. Кроме того, нажатие на модальный фон автоматически закрывает модальное окно. Bootstrap 4 поддерживает только одно модальное окно за раз. Эта статья посвящена открытию другого модального окна внутри списка. Приведенные ниже примеры демонстрируют открытие модального окна из элемента списка.

Первый подход: первый подход имеет дело с модальными окнами, содержащими совершенно другой контент. В этом случае модальные окна необходимо кодировать индивидуально.

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
" https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css "
integrity =
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin = "anonymous" >
< script src =
" https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity =
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" >
</ script >
< script src =
" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
" https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
integrity =
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
<!-- Button trigger modal -->
< ul >
< li data-toggle = "modal"
data-target = "#exampleModal1"
data-whatever = "item 1" >
< a href = "#" >Item 1</ a >
</ li >
< li data-toggle = "modal"
data-target = "#exampleModal2"
data-whatever = "item 2" >
< a href = "#" >Item 2</ a >
</ li >
< li data-toggle = "modal"
data-target = "#exampleModal3"
data-whatever = "item 3" >
< a href = "#" >Item 3</ a >
</ li >
</ ul >
<!-- Modal -->
< div class = "modal fade" id = "exampleModal1"
tabindex = "-1" role = "dialog"
aria-labelledby = "exampleModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "exampleModalLabel" >
Modal title
</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
< div class = "modal-body" >
< p >
Python is a high-level, general-purpose
and a very popular programming language..
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button" class =
"btn btn-secondary" data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
< div class = "modal fade" id = "exampleModal2"
tabindex = "-1" role = "dialog"
aria-labelledby = "exampleModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "exampleModalLabel" >
Modal title</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
< div class = "modal-body" >
< p >
This specially designed Python
tutorial will help you learn
Python Programming Language.
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-secondary"
data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
< div class = "modal fade" id = "exampleModal3"
tabindex = "-1" role = "dialog"
aria-labelledby = "exampleModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "exampleModalLabel" >
Modal title
</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal"
aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
< div class = "modal-body" >
< p >
Learning applications, along with
all cutting edge technology in
Software Industry.
</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-secondary"
data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >

Выход

  • Следующий вывод отображается при щелчке по «item1».

  • Следующий вывод отображается при щелчке по «item2».

  • Следующий вывод отображается при щелчке по «item3».

Второй подход: второй подход имеет дело с модальными окнами, которые имеют почти одинаковое содержание с очень небольшими различиями. Написана функция JavaScript для изменения текста в зависимости от требований. Событие show.bs.modal запускается сразу после вызова метода экземпляра show элемента списка. Выбранный элемент доступен как свойство relatedTarget события. Целевой элемент хранится в переменной li. Затем значение целевого элемента, независимо от данных, сохраняется в переменной получателя. Текущее модальное событие сохраняется в модальной переменной. Эта модальная переменная вызывает метод find () для поиска модального «заголовка» и модального «тела» и замены их требуемым текстом.

<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
" https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css "
integrity =
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin = "anonymous" >
< script src = " https://code.jquery.com/jquery-3.4.1.slim.min.js "
integrity =
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" >
</ script >
< script src =
" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
integrity =
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" >
</ script >
< script src =
" https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
integrity =
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
<!-- Button trigger modal -->
< ul >
< li data-toggle = "modal"
data-target = "#exampleModal"
data-whatever = "item 1" >
< a href = "#" >Item 1</ a >
</ li >
< li data-toggle = "modal"
data-target = "#exampleModal"
data-whatever = "item 2" >
< a href = "#" >Item 2</ a >
</ li >
< li data-toggle = "modal"
data-target = "#exampleModal"
data-whatever = "item 3" >
< a href = "#" >Item 3</ a >
</ li >
</ ul >
<!-- Modal -->
< div class = "modal fade" id = "exampleModal"
tabindex = "-1" role = "dialog"
aria-labelledby = "exampleModalLabel"
aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title"
id = "exampleModalLabel" >
Modal title
</ h5 >
< button type = "button" class = "close"
data-dismiss = "modal"
aria-label = "Close" >
< span aria-hidden = "true" >×</ span >
</ button >
</ div >
< div class = "modal-body" >
< p > hi</ p >
</ div >
< div class = "modal-footer" >
< button type = "button"
class = "btn btn-secondary"
data-dismiss = "modal" >
Close
</ button >
</ div >
</ div >
</ div >
</ div >
< script >
$('#exampleModal').on('show.bs.modal',
function (event) {
// Button that triggered the modal
var li = $(event.relatedTarget)
// Extract info from data attributes
var recipient = li.data('whatever')
// Updating the modal content using
// jQuery query selectors
var modal = $(this)
modal.find('.modal-title')
.text('New message to ' + recipient)
modal.find('.modal-body p')
.text('Welcome to ' + recipient)
})
</ script >
</ body >
</ html >

Выход

JavaScript Вопросы о Web технологиях HTML HTML-Misc Bootstrap

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023