bootstrap实现多模态框的方法

来源：互联网发布：c语言24关键字编辑：程序博客网时间：2024/06/05 23:46

前言

最近在项目中使用bootstrap模态框的时候发现了一个问题，那就是bootstrap模态框不支持多模态框，即不支持弹出了一个模态框之后，再弹出第二个模态框，只支持弹出一个模态框，虽然说第二个或更多模态框可以正常弹出，但是会出现问题，这里就两个我发现的问题来分享给大家：
首先来看一下正常一个模态框弹出的样子：
正常弹出一个模态框的样子

问题一：

当弹出多个模态框背景遮罩增多，导致背景的颜色越来越深，如下图：

多个模态框叠加
如何解决这个问题请点击如下链接，这里不做细说。
http://blog.csdn.net/zxlvxj/article/details/44036339

问题二：

再一个问题就是，当前页面的内容出现了滚动条，并且前一个模态框内容过长也出现滚动条，打开第二个或多个模态框时，关闭一个模态框时出现，如图所示：
滚动到按钮处
然后点击弹出第三个模态框按钮，再将其关闭，出现问题，当滚动滚动条的时候，是主页面在滚动，而不是前一个模态框即第二个模态框。如图所示：
这里写图片描述
解决这个问题需要重写覆盖模态框原型hideModal的方法，代码如下：

//覆盖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')                })            }

完美解决问题，最后附上整个测试的代码，以供大家参考：

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="bootstrap.css"/>    <style>        #container{            height:1000px;            background:#ccc;        }    </style></head><body>    <div id="container">        <span>这是一个很长的div,使页面出现滚动条。</span>        <h2>使用Bootstrap创建多模态框</h2>        <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>你可以在这添加一些文本。</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>你可以在这添加一些文本。</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>        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')                })            }        });    </script></body></html>

1 0