解决bootsrap多层模态框叠加问题

最近在项目中使用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') }) }

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


<html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <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> <

转载于:https://www.cnblogs.com/TigerZhang-home/p/8309041.html

你可能感兴趣的:(解决bootsrap多层模态框叠加问题)