Javascript 包含jquery mobile CSS时，引导模式触发器事件的顺序不正确

我遇到了一个仅显示背景的情况，并且仅在移除背景后才显示模态。这是我在使用bootstrap几年后第一次遇到这个问题，我不知道为什么。调试时，在第一次通过时不会触发回调。只有在我点击背景后才会触发

以前有人遇到过这个问题吗？这可能与CSS冲突有关吗？删除jquery-mobile-1.4.2.css似乎有帮助，但我需要两者共同工作。我使用的引导版本是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')
    })
}

---

jquerymobile和Twitter引导使用导致冲突的类“fade”和“in”。这是我如何摆脱它的

使用以下类创建覆盖样式表（这些类从bootstrap.css文件复制并修改，因此对“淡入”或“淡入”的任何引用都将分别变为“引导淡入”和“引导淡入”：

.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;
    }
}

接下来，您需要编辑bootstrap.js文件。您可以复制整个模式部分（第61-310行），也可以使用find和replace直接在文件中编辑它。使用新类“bootstrap fade”和“bootstrap in”替换对“fade”和“in”的所有引用。有5个“fade”实例和4个“in”实例在js文件的模态部分

一旦你做到了这一点，只需正常创建你的模态，并使用“引导淡入淡出”类而不是“淡入淡出”

<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>