关于bootstrap单页面中多Modal的问题

在web苦海中前行真的是一件十分煎熬但又开心的事，煎熬是因为时常被小bug和杂七杂八的兼容性影响，而开心是因为终于大学毕业可以拿转正工资了。

步入正轨，在做毕设时我在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条，覆盖整个body的阴影瞬间变暗。真的是哔了dog，如今在公司又出现了阴影的问题所以我观察了源码后发现，bootstrap.js文件中modal的遮罩层函数如下：

 Modal.prototype.backdrop = function (callback) {
  var that = this
  var animate = this.$element.hasClass('fade') ? 'fade' : ''

if (this.isShown && this.options.backdrop) {
    var doAnimate = $.support.transition && animate

this.$backdrop = $(document.createElement('div'))
      .addClass('modal-backdrop ' + animate)
      .appendTo(this.$body)
    ...
 }

后面还有balabala一大串，但这些就足够分析了。在单击modal后会有一个叫modal-backdrop的div层apped到body之后，那言下之意是不管开几个modal都会不断的向body后append，啊！怎么能这样。。。然后我简单对modal-backdrop进行处理，如下：

/**
 * Created by George on 2016/7/5.
 */
document.getElementById('ta').addEventListener('click' , function(){
    $('#myModal').modal('show');
});
document.getElementById('tt').addEventListener('click' , function(){
    $('#myModal1').modal('show');
/*
    $('#myModal').modal('hide');
*/
console.log($('.modal-backdrop').length)
    console.log($('.modal-backdrop'))
    var iLen = $('.modal-backdrop').length;
    for(var i = 0; i<iLen;i++){
        $('.modal-backdrop')[i].id = 'modal'+i;
    }
    if(iLen>1){
        for(var i =1;i<2;i++){
            $('#modal'+i).removeClass();
        }
    }
});

为每个modal-backdrop对应的div添加个id，然后找到这个div将.modal-backdrop这个removeClass()掉就行。在这里肯定会有小伙伴说不论是几个那只需要在显示当前modal的时候把剩下的hide不就可以了么？这个办法我也试了试如上代码前6行，这样做确实能达到阴影不加深的效果但是用户体验会差很多，因为hide的时候页面会刷新。

前面还说到有多余滚动条的问题，因为这个问题当时做毕设没有深究而到了新公司换了新设备已经没有这个问题了so我就偷了下懒。不过我相信没有攻读源码还解决不了的bug，如果有那就再度一遍源码吧。。。

关于bootstrap单页面中多Modal的问题

猜你喜欢