當包含jquery手機CSS時，以不正確的順序引導模態觸發器事件

我遇到了一種情況，只顯示背景，僅在移除背景後顯示模式。這是我在使用bootstrap幾年後第一次遇到這個問題，我無法弄清楚爲什麼。調試時，回調在第一遍時從不觸發。只有在點擊背景後纔會觸發。當包含jquery手機CSS時，以不正確的順序引導模態觸發器事件

之前有人遇到過這個問題嗎？這可能與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') 
    }) 
}

來源

2014-03-24 juminoz

jQuery Mobile和Twitter Bootstrap使用導致衝突的類「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），或者你可以直接在文件中查找編輯和。用你的新類「bootstrap-fade」和「bootstrap-in」替換所有對「fade」和「in」的引用。在模態secti中有5個「fade」實例和4個「in」實例關於js文件。

一旦你這樣做了，只需創建你的模態，並使用類「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>

希望幫助！

來源

2014-07-24 13:19:51 JadedCore

當包含jquery手機CSS時，以不正確的順序引導模態觸發器事件

回答

相關問題