ブートストラップモーダル -

Question

を逃す近い効果私は、私が唯一の必要なクラスをインポートした全bootstrap.css含むmodal.jsとの代わりとブートストラップモーダルを使用しています：

.fade { 
    opacity: 0; 
    -webkit-transition: opacity .15s linear; 
    -o-transition: opacity .15s linear; 
    transition: opacity .15s linear; 
} 
.fade.in { 
    opacity: 1; 
} 
.modal-open { 
    overflow: hidden; 
} 
.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    display: none; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
} 
.modal.fade .modal-dialog { 
    -webkit-transition: -webkit-transform .3s ease-out; 
     -o-transition:  -o-transform .3s ease-out; 
      transition:   transform .3s ease-out; 
    -webkit-transform: translate(0, -25%); 
     -ms-transform: translate(0, -25%); 
     -o-transform: translate(0, -25%); 
      transform: translate(0, -25%); 
} 
.modal.in .modal-dialog { 
    -webkit-transform: translate(0, 0); 
     -ms-transform: translate(0, 0); 
     -o-transform: translate(0, 0); 
      transform: translate(0, 0); 
} 
.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.modal-dialog { 
    position: relative; 
    width: auto; 
    margin: 10px; 
} 
.modal-content { 
    position: relative; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
      background-clip: padding-box; 
    border: 1px solid #999; 
    border: 1px solid rgba(0, 0, 0, .2); 
    border-radius: 6px; 
    outline: 0; 
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); 
      box-shadow: 0 3px 9px rgba(0, 0, 0, .5); 
} 
.modal-backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1040; 
    background-color: #000; 
} 
.modal-backdrop.fade { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 
.modal-header { 
    min-height: 16.42857143px; 
    padding: 15px; 
    border-bottom: 1px solid #e5e5e5; 
} 
.modal-header .close { 
    margin-top: -2px; 
} 
.modal-title { 
    margin: 0; 
    line-height: 1.42857143; 
} 
.modal-body { 
    position: relative; 
    padding: 15px; 
} 
.modal-footer { 
    padding: 15px; 
    text-align: right; 
    border-top: 1px solid #e5e5e5; 
} 
.modal-footer .btn + .btn { 
    margin-bottom: 0; 
    margin-left: 5px; 
} 
.modal-footer .btn-group .btn + .btn { 
    margin-left: -1px; 
} 
.modal-footer .btn-block + .btn-block { 
    margin-left: 0; 
} 
.modal-scrollbar-measure { 
    position: absolute; 
    top: -9999px; 
    width: 50px; 
    height: 50px; 
    overflow: scroll; 
} 

問題は、私が行方不明です、ですモーダルを閉じるときのフェード効果で、どのクラスが使用されているのかわかりません。 モーダルを閉じると、フェード効果なしですぐに消えるだけです。

誰でも手助けできますか？ JSFIDDLE

は、代替ソリューションは、全体のブートストラップファイルをインクルードし、最後に「uncss」を使用することができ

Answer 1

ありがとう：

この

はJSFiddle上の例です。

Answer 2

私は問題の答えを見つけました。 閉じるフェード効果を使用するには、modal.jsクラスにtransitions.jsが必要です。 このファイルを含める "を... $ .support.transition" を下記の

Modal.prototype.hide = function (e) { 
    if (e) e.preventDefault() 

    e = $.Event('hide.bs.modal') 

    this.$element.trigger(e) 

    if (!this.isShown || e.isDefaultPrevented()) return 

    this.isShown = false 

    this.escape() 
    this.resize() 

    $(document).off('focusin.bs.modal') 

    this.$element 
     .removeClass('in') 
     .off('click.dismiss.bs.modal') 
     .off('mouseup.dismiss.bs.modal') 

    this.$dialog.off('mousedown.dismiss.bs.modal') 

    $.support.transition && this.$element.hasClass('fade') ? 
     this.$element 
     .one('bsTransitionEnd', $.proxy(this.hideModal, this)) 
     .emulateTransitionEnd(Modal.TRANSITION_DURATION) : 
     this.hideModal() 
    } 

を参照してください。問題を解決しました。