bootstrap多个模态框关闭问题

最新推荐文章于 2024-08-21 09:17:03 发布

脑瓜不疼

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量4.3k

点赞数 1

分类专栏：大前端文章标签： bootstrap

本文链接：https://blog.csdn.net/super__code/article/details/90416278

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

项目中使用模态框的时候会关闭所有

解决方法

jQuery(function($){
        //解决模态框背景色越来越深的问题
        $(document).on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('body'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });

        function setModalsAndBackdropsOrder() {
            var modalZIndex = 1040;
            $('.modal.in').each(function(index) {
                var $modal = $(this);
                modalZIndex++;
                $modal.css('zIndex', modalZIndex);
                $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
            });
            $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
        }

        //覆盖Modal.prototype的hideModal方法
        $.fn.modal.Constructor.prototype.hideModal = function () {
            var that = this
            this.$element.hide()
            this.backdrop(function () {
                //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
                $('.modal.fade.in').length === 0 && that.$body.removeClass('modal-open')
                that.resetAdjustments()
                that.resetScrollbar()
                that.$element.trigger('hidden.bs.modal')
            })
        }
    });

效果
在这里插入图片描述
整体代码

<div id="container">
    <div id="example1" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第一个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第一个模态框中的文本</h4>
                </div>
                <div class="modal-footer">
                    <a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">弹出第二个模态框</a>
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <div id="example2" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第二个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第二个模态框中的文本</h4>
                </div>
                <div class="modal-footer">
                    <a data-toggle="modal" href="#example3" class="btn btn-primary btn-large">弹出第三个模态框</a>
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <div id="example3" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>这是第三个模态框</h3>
                </div>
                <div class="modal-body">
                    <h4>第三个模态框中的文本</h4>
                </div>
                <div class="modal-footer">
                    <!--<a data-toggle="modal" href="#example2" class="btn btn-primary btn-large">发动演示模态框</a>-->
                    <a href="#" class="btn" data-dismiss="modal">关闭</a>
                </div>
            </div>
        </div>
    </div>
    <p><a data-toggle="modal" href="#example1" class="btn btn-primary btn-large">发动演示模态框</a></p>
</div>