Question

我试图通过当前打开模式中的next和prev链接循环遍历多个Bootstrap3模态。如果您点击“下一步”，我的脚本会转到下一个模式，或者如果您单击“上一页”，则返回上一个模式，但我可以不再使用数据 - 关闭=＆＃34;模态＆＃34;隐藏模态的功能。另外，我的JQuery似乎相当hacky。有没有更好的办法？欢迎任何帮助。

<button class="text-link" data-toggle="modal" data-target="#modalOne">Modal One</button>
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalOne">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
            <a class="next"></a>
            <a class="prev"></a>
            <div class="modal-body">
            Hello Earth
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<button class="text-link" data-toggle="modal" data-target="#modalTwo">Modal Two</button>
<div class="modal fade default-modal" tabindex="-1" role="dialog" id="modalTwo">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-times" aria-hidden="true"></i></button>
            <a class="next"></a>
            <a class="prev"></a>
            <div class="modal-body">
            Hello Mars
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$(document).ready(function() {
    $('a.next').on('click', function() {
        $(this).closest('.modal').css("display", "none");
        $(this).closest('.modal').removeClass('in').next().addClass('in').css("display", "block");
    });
    $('a.prev').on('click', function() {
        $(this).closest('.modal').css("display", "none");
        $(this).closest('.modal').removeClass('in').prev().addClass('in').css("display", "block");
    });
});

Answer 1

您可以尝试使用modal的内置节目隐藏功能：

$(document).ready(function() {
    $('a.next').on('click', function() {
        let dialog = $(this).closest('.modal');
        dialog.modal('hide');
        dialog.next().modal('show');
    });
    $('a.prev').on('click', function() {
        let dialog = $(this).closest('.modal');
        dialog.modal('hide');
        dialog.prev().modal('show');
    });
});

如何使用next / prev链接循环访问多个Bootstrap3模态

1 个答案: