在关闭按钮上更改bootstrap模式的动画以向左滑动

时间:2018-05-11 17:41:48

标签: css bootstrap-modal

我有一个自举模式,当点击一个按钮时,它会从左向右滑动。当点击模态关闭按钮时,我想让它从右向左滑动。只想在关闭按钮上反转动画,此时是关闭按钮的默认引导模态行为。以下是代码。

直播链接:http://www.babaraliseehar.com/onepage/index.php 单击比较按钮以显示模态。

    .modal.fade:not(.in).right .modal-dialog {
    -webkit-transform: translate3d(125%, 0, 0);
    transform: translate3d(125%, 0, 0);
}

#modal h2 {
    margin:0;
}
#modal .copy,#modal .header, #modal .footer {
    padding: 5px;
}
.modal-content {
    background: #f7f7f7;
    position: relative;
    z-index: 20;

}
#modal .copy {
    background: #fff;
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

1 个答案:

答案 0 :(得分:0)

我自己修好了。添加了数据方向=' left'关闭按钮和css

    .modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}