bootstrap多个模态框嵌套显示，造成的遮罩颜色加深和页面滚动条问题

最新推荐文章于 2024-05-10 11:11:13 发布

Shacoray

最新推荐文章于 2024-05-10 11:11:13 发布

阅读量1.2k

点赞数

文章标签： javascript bootstrap 解决方案

网上找到了csdn 一位大神的解决方案：

http://blog.csdn.net/k358971707/article/details/71908862

大神的方案有一点小问题，就是当多个模态框都有滚动条的时候，隐藏前一个模态框后，当前模态框的滚动条不出现了。

我在大神基础上改进了，现在记录，贴上代码

修改代码：

//判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
            if ($('.modal.fade.in').length === 0){
            	that.$body.removeClass('modal-open');
            	that.$body.css({"padding":"8px 20px"});
            }else{
            	that.$body.addClass('modal-open');
            	that.$body.css({"padding":"8px 20px"});
            }

整体代码：

<body>
    <div id="container">
        <span >这是一个很长的div,使页面出现滚动条。</span>
        <h2>使用Bootstrap创建多模态框</h2>
        <p style="height:900px">你可以在这添加一些文本。</p>
        <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>
                        <p style="height:900px">你可以在这添加一些文本。</p>
                    </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>
                        <p style="height:900px">你可以在这添加一些文本。</p>
                    </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>
                        <p style="height:900px">你可以在这添加一些文本。</p>
                    </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>
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <script>
    $(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();
    });
    $.fn.modal.Constructor.prototype.hideModal = function () {
        var that = this;
        this.$element.hide();
        this.backdrop(function () {
            //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
            if ($('.modal.fade.in').length === 0){
            	that.$body.removeClass('modal-open');
            	that.$body.css({"padding":"8px 20px"});
            }else{
            	that.$body.addClass('modal-open');
            	that.$body.css({"padding":"8px 20px"});
            }
            //that.resetAdjustments();
            that.resetScrollbar();
            that.$element.trigger('hidden.bs.modal');
        });
    };

    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');
    }
    </script>
</body>

Shacoray

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bootstrap多个模态框嵌套显示，造成的遮罩颜色加深和页面滚动条问题

网上找到了csdn 一位大神的解决方案：http://blog.csdn.net/k358971707/article/details/71908862大神的方案有一点小问题，就是当多个模态框都有滚动条的时候，隐藏前一个模态框后，当前模态框的滚动条不出现了。我在大神基础上改进了，现在记录，贴上代码修改代码：//判断当前页面所有的模态框都已经隐藏了之后body移除.m
复制链接

扫一扫