javascript - 当包含 jquery 移动 CSS 时， Bootstrap 模式触发事件的顺序不正确

Question

我遇到了只显示背景的情况，而模态仅在删除背景后显示。这是我在使用 Bootstrap 几年后第一次遇到这个问题，我无法弄清楚为什么。调试时，回调永远不会在第一次通过时触发。它仅在我单击背景后触发。

以前有其他人遇到过这个问题吗？这可能与 CSS 冲突有关吗？删除 jquery-mobile-1.4.2.css 似乎有帮助，但我有点需要它们一起工作。我使用的 Bootstrap 版本是 2.3.2。

this.backdrop(function() {
    var transition = $.support.transition && that.$element.hasClass('fade')

    if (!that.$element.parent().length) {
        that.$element.appendTo(document.body) //don't move modals dom position
    }

    that.$element.show()

    if (transition) {
        that.$element[0].offsetWidth // force reflow
    }

    that.$element.addClass('in').attr('aria-hidden', false)

    that.enforceFocus()

    transition ? 
        that.$element.one($.support.transition.end, function() {
            that.$element.focus().trigger('shown')
        }) : 
        that.$element.focus().trigger('shown')
    })
}

Answer 1

jQuery Mobile 和 Twitter Bootstrap 使用类“fade”和“in”，这导致了冲突。这是我如何解决它的。

1. 使用以下类创建覆盖样式表(这些是从 bootstrap.css 文件复制并修改的，因此对“fade”或“in”的任何引用都变成“bootstrap-fade”和“bootstrap-in”分别是:

   .modal-backdrop.bootstrap-fade {
     opacity: 0;
   }
   
   .modal-backdrop,
   .modal-backdrop.bootstrap-fade.bootstrap-in {
     opacity: 0.8;
     filter: alpha(opacity=80);
   }
   
   .modal.bootstrap-fade {
     -webkit-transition: opacity .3s linear, top .3s ease-out;
     -moz-transition: opacity .3s linear, top .3s ease-out;
     -o-transition: opacity .3s linear, top .3s ease-out;
     transition: opacity .3s linear, top .3s ease-out;
     top: -25%;
   }
   
   .modal.bootstrap-fade.bootstrap-in {
     top: 10%;
   }
   
   .bootstrap-fade {
     opacity: 0;
     -webkit-transition: opacity 0.15s linear;
     -moz-transition: opacity 0.15s linear;
     -o-transition: opacity 0.15s linear;
     transition: opacity 0.15s linear;
   }
   
   .bootstrap-fade.bootstrap-in {
     opacity: 1;
   }
   
   @media (max-width: 767px) {
       .modal.bootstrap-fade {
           top: -100px;
       }
       .modal.bootstrap-fade.bootstrap-in {
           top: 20px;
       }
   }
   

2. 接下来您需要编辑 bootstrap.js 文件。您可以复制整个模态部分(第 61 - 310 行)，也可以直接在文件中使用查找和替换对其进行编辑。用新类“bootstrap-fade”和“bootstrap-in”替换所有对“fade”和“in”的引用。在js文件的modal部分有5个“fade”和4个“in”。

3. 完成后，只需正常创建模态并使用类“bootstrap-fade”而不是“fade”即可。

   <div id="myModal" class="modal hide bootstrap-fade" tabindex="-1" role="dialog" aria-labelledby=myModalLabel" aria-hidden="true">
       <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
           <h2 id="assignModalLabel">Modal</h2>
       </div>
       <div class="modal-body">
       </div>
       <div class="modal-footer">
       </div>
   </div>
   

希望对您有所帮助!