Почему Owl Carousel блокирует стандартное модальное окно Bootstrap 4?

Question

[Алексей Николаев]

Всем привет!

Столкнулся с проблемой, что Owl Carousel блокирует правильное отображение стандартного модального окна Bootstrap 4.

Имеется owl-карусель, а в ней - три айтема, где каждый айтем - это кнопка, вызывающая стандартное модальное окно бутстрпапа.

Путем различных манипуляций, было выяснено, что проблема именно в CSS карусели, т.к при комментировании ссылки на CSS, работоспособность стандартного окна возвращается.

Буду благодарен совместному решению этой проблемы или хотя бы ответу на вопрос почему так происходит. Ниже прикрепляю небольшой сниппет с JSFiddle.

Спасибо за внимание!

JSFiddle

Answer 1

[FeST1VaL]

Как по мне тут 2 проблемы...

1. Это верстка
2. Это LOOP режим у OWL... (с ним очень много разных проблем....).

Когда включен loop он дублирует слайды, и они называются owl-item cloned как то так...
так вот когда вы нажимаете на блок, то вы жмете по клону и внутри него открывается модальное окно, но активным OWL делает не клонированный объект... А тот с которого он скопировал... так что вам надо придумать какой то костыль)))

Ну а насчет верстки... это то что у вас один и тот же ID для всех модалок и то что модалки находятся в коде слайда...

Comments

[Алексей Николаев]

Здравствуйте!

Спасибо за Ваш ответ!

И вправду, согласен со всеми пунктами.

Мне следовало отнестись более грамотно к написанию примера для других пользователей, прошу прощения за это.

Буквально сейчас с товарищем нашли проблему, вынеся диалог модального окна за секцию, Вы и здесь были правы!

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

Еще раз благодарю за вклад в решение проблемы.

JSFiddle