bootstrap模态框怎么从底部弹出呢？

CSS

.modal.fade:not(.in).left .modal-dialog {

-webkit-transform: translate3d(-25%, 0, 0);

transform: translate3d(-25%, 0, 0);

}

.modal.fade:not(.in).right .modal-dialog {

-webkit-transform: translate3d(25%, 0, 0);

transform: translate3d(25%, 0, 0);

}

.modal.fade:not(.in).bottom .modal-dialog {

-webkit-transform: translate3d(0, 25%, 0);

transform: translate3d(0, 25%, 0);

}



/* Alternative Angles */

.modal.fade:not(.in).top-left .modal-dialog {

-webkit-transform: translate3d(-25%, -25%, 0);

transform: translate3d(-25%, -25%, 0);

}

.modal.fade:not(.in).top-right .modal-dialog {

-webkit-transform: translate3d(25%, -25%, 0);

transform: translate3d(25%, -25%, 0);

}

.modal.fade:not(.in).bottom-left .modal-dialog {

-webkit-transform: translate3d(-25%, 25%, 0);

transform: translate3d(-25%, 25%, 0);

}

.modal.fade:not(.in).bottom-right .modal-dialog {

-webkit-transform: translate3d(25%, 25%, 0);

transform: translate3d(25%, 25%, 0);

}
JS

$('.btn').click(function() {

$('.modal')

    .prop('class', 'modal fade') // revert to default

    .addClass( $(this).data('direction') );

$('.modal').modal('show');

});

Html

<a class='btn btn-primary btn' data-direction='top'>Top (default)</a>

<a class='btn btn-primary btn' data-direction='left'>Left</a>

<a class='btn btn-primary btn' data-direction='right'>Right</a>

<a class='btn btn-primary btn' data-direction='bottom'>Bottom</a>





<a class='btn btn-info btn' data-direction='top-left'>Top-Left</a>

<a class='btn btn-info btn' data-direction='top-right'>Top-Right</a>

<a class='btn btn-info btn' data-direction='bottom-left'>Bottom-Left</a>

<a class='btn btn-info btn' data-direction='bottom-right'>Bottom-right</a>

请不要用baidu，google才是王道！实在不行bing，请用英语进行搜索，关键词：bootstrap modal fade direction

原文地址不能带连接，只能发个图了，尊重他人的劳动的成果！
jsfiddle.net/daverogers/mu5mvba0/