引導模式 - 近效應缺失

我使用與modal.js引導模態，而是包括整個bootstrap.css我只導入所需的類：引導模式 - 近效應缺失

.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的例子： JSFIDDLE

謝謝

來源

2016-05-17 MeV

你能分享一個工作的例子嗎？ – Andrew

爲什麼你不包括所有的引導？您不需要真正在意這裏的性能，因爲壓縮的CSS影響最小，並且可以在以後避免許多問題（如本文所述）。 –

@Andrew我添加了一個工作示例。謝謝！ – MeV

另一種解決方案可以包括整個引導文件，並使用「uncss」結尾。

來源

2016-05-17 13:29:28

有趣，你知道如果uncss可用於咕嚕聲嗎？ – MeV

是的。 https://github.com/addyosmani/grunt-uncss –

Supercool，謝謝 – MeV

我剛剛找到了問題的答案。 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() 
    }

含有該文件解決了這個問題。

來源

2016-05-17 13:58:21 MeV

引導模式 - 近效應缺失

回答

相關問題