如何通过下一个/上一个链接循环浏览多个Bootstrap3模态

Question

I am trying to cycle through multiple Bootstrap3 modals via next and prev links inside the current open modal. The script I have does go to the next modal along if you click 'next', or back to the previous modal if you click 'prev', but I can nolonger use the data-dismiss="modal" functionality to hide the modal. Plus, my JQuery seems rather hacky. Is there a better way? Any help welcome.

<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

You can try using the built-in show hide functionality of the modal say:

$(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');
    });
});