Как в Bootstrap3 сделать вызов из модального окна другое модальное окно?

Question

[Alena]

Например есть кнопка "описание"

<a href="#description-training" data-toggle="modal">описание</a>

по клику на эту кнопку всплывает бутсраповское модальное окно с описание. В нем же есть еще одна кнопка, например "заказать звонок"

<a href="#modalOrderCall" data-toggle="modal" data-dismiss="modal" >Заказать звонок</a>

которая по клику должна закрыть это окно и запустить другое. Для закрытия текущего я использую атрибут data-dismiss="modal".
И вроде бы все работает, но, после открытия второго окна убирается класс "modal-open", который вешается на body, добавляя стиль overflow:hidden, и тем самым не давая сайту скроллироваться.

В общем после открытия второго окна из первого появляется возможность скролировать сайт, что не круто. Есть способы борьбы с этим?

Answer 1

[Руслан Лопатин]

Попробуйте открывать второе окно не сразу, а по таймауту. Можно даже использовать нулевой таймаут.

/* close modal */
setTimeout(function() {/* open modal */}, 0)

Comments

[Alena]

нет, это не работает.

[Руслан Лопатин]

Но вообще, правильно открывать второе окно только после закрытия первого. То есть по событию hidden.bs.modal. Поскольку два модальных окна одновременно в Bootstrap не поддерживаются, что может приводить к самым неожиданным косякам.

[Alena]

а все же сработало, только нужно ставить задержку не меньше 400, лучше 500-600 что бы так дергано выглядело.

[Руслан Лопатин]

Да, но лучше всё-же по событию. Тогда и задержку угадывать не нужно будет.

Answer 2

[Alena]

Пришлось на клик вешать вот такой код

('#getModal').click(function(){
        $('#description-training').modal('hide');
        setTimeout(function() {$('#modalOrderCall').modal('show');}, 500)
        return false;
    })

то есть по сути закрыть одно и потом открыть второе.

Comments

[Руслан Лопатин]

Вот так тоже должно сработать, даже лучше:

('#getModal').click(function(){
        $('#description-training').modal('hide').one(
                'hidden.bs.modal',
                function() {$('#modalOrderCall').modal('show');});
        return false;
    })

Answer 3

[Alena]

Но если честно, то мне не очень нравится эффект дергания. Так как при открытии сначала обрезается экран и появляется затемняющий фон, потом экран снова встает на место и исчезает фон, и потом опять появляется, какой-то такой дерганный эффект.

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

Comments

[Руслан Лопатин]

Ну вы же можете поместить внутрь одного модального окна содержимое для двух окон. И менять видимое содержимое, не закрывая само окно.

[Alena]

Вариант не плохой, но мне нужно вызывать окно "заказать звонок" из 5 разных мест на сайте. И 2 из них модальные окна, получается что придется 3 раза продублировать это окно.

[Alena]

о а второй вариант интересный!

[Руслан Лопатин]

Можно подгружать содержимое с помощью Ajax. Но вот ещё один плагин: jschr.github.io/bootstrap-modal/bs3.html

[Alena]

Спасибо за информацию, буду думать.
А вот второй плагин не очень, так как при вызове второго окна он просто поверх первого все накрывает, в том числе и фон.

[Руслан Лопатин]

Тот плагин, что я предлагал первым поддерживает только Bootstrap 2, к сожалению. Его пришлось бы переделывать. В Bootstrap 3 вёрстка модальных окон другая. Но вариант с Ajax - загрузкой остаётся.

Answer 4

[Jamshed]

Раз уж проблема в том что у body исчезает класс "modal-open". Можно навесить на событие "shown.bs.modal" (срабатывает после открытия) 2-го модального окна код который будет добавлять в body класс "modal-open":

$('#modal2').on('shown.bs.modal', function (event) {
  $('body').addClass('modal-open');
})