Модальный Bootstrap / Несколько модальных окон на одной странице / модально-открытый класс ⇐ CSS

[Гость]

У меня серьезная проблема с модальными окнами в Bootstrap.

Когда я открываю модальное окно на своем веб-сайте, проблем абсолютно нет (класс modal-open правильно добавлено на тело) модальное окно правильное, оттенок нормальный, содержимое ясное:

Код: Выделить всё

buttonOpenMe

Когда я закрываю его вручную, все тоже нормально:

Код: Выделить всё

×CLOSE

В моем первом модальном окне у меня есть две другие кнопки для проверки моих предыдущих и следующих проектов (мой веб-сайт одностраничный).

И вот что я хочу сделать:

действие 1) открыть модальное окно №1

действие 2) прокрутить и нажать на следующий проект< br />
действие 3) закрыть модальное окно №1

действие 4) открыть модальное окно №2 и т. д.

Код: Выделить всё

CloseThis

В моем теле был добавлен класс под названием «modal-open», когда модальное окно открывается. Но когда я уже нахожусь в первом модальном окне и хочу перейти во второй проект (модальное окно №2), он появляется, но моя прокрутка заблокирована, и мое тело потеряло свой класс «модально-открытый».

Я думаю, data-dismiss="modal" все прояснит. Но когда я добавляю вручную (с помощью инспектора) класс "modal-open" на свое тело, когда открывается второй модальный модуль, все работает.

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

Я думаю, мне пришлось искать фрагменты такого типа для автоматического добавления класса в тело, что-то вроде это :

Код: Выделить всё

    $(document)
.on('show.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
})

But actually, everything failed, obviously!

How can I fix this?

If you want to take a look to my online test version: http://bg-portfolio.com/bg_test/index.php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!

PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)


Источник: https://stackoverflow.com/questions/454 ... open-class