Question

我有以下javascript可以在两个引导模态之间切换。

然而，当第二个模态出现时，Bootstrap类＆＃34;模态打开＆＃34;当打开模态时，它被附加到body类没有添加到第二个模态上。然后模态背景然后滚动而不是模态本身。

我需要做的修复是添加＆＃34; modal-open＆＃34;第二个#priorityModal打开时的body标签。

有人可以告诉我如何将它添加到下面的代码中吗？

function showDialog2() {
  $("#developmentModal").modal("hide");
  $("#priorityModal").modal("show");
}

$("#toggledevelopmentModal").on("click", function () {
  showDialog2();
});

Answer 1

我认为this question可能会提供答案。

似乎在“显示”完成后触发的事件中删除了modal-open。因此，可能需要在hidden.bs.modal事件的处理程序中重新启用它。（这就是我在自己的网站上使它发挥最佳效果的方式。）

Answer 2

只有在前一个弹出窗口关闭后才能打开一个新的弹出窗口。

var developmentModal = $("#developmentModal"),
    priorityModal = $("#priorityModal");

function showDialog2() {    
    developmentModal.on('hidden.bs.modal', function () {
        priorityModal.modal("show")
    });
    developmentModal.modal("hide");
}

那应该没问题

Answer 3

根据记录... Bootstrap 4 Modal Events

这就是我所做的...

<div id="firstModal" class="modal fade">
    <a
        id="firstModalToSecondModalLink"
        data-target="secondModal"
        class="switch-modal-link"
        href="#"
    >Switch to Modal 2</a>
    <a
        id="firstModalToThirdModalLink"
        data-target="thirdModal"
        class="switch-modal-link"
        href="#"
    >Switch to Modal 3</a>
</div>

<script>
    var next_modal = false;
    $('.switch-modal-link').click(function(e) {
        e.preventDefault();
        next_modal = $('#'+$(this).attr('data-target'));
        $(this)
            .closest('.modal')
            .modal('hide')
            .on(
                'hidden.bs.modal',
                function() {
                    if(next_modal) {
                        next_modal.modal({
                            show: true
                        });
                        next_modal = false;
                    }
                }
            );
    });
</script>

Bootstrap模式在两个滚动问题之间切换

3 个答案: