Question

我想改变bootstrap模态打开效果。默认效果不太好。

我们可以有任何改变方法吗？

另外，我想在中心打开模态而不是在顶部。

Answer 1

我找到了最简单的方法。只需添加以下css。

.modal.fade .modal-dialog {
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
transform: scale(0.1);
top: 300px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}

Answer 2

首先你需要一个样式表，其链接位于bootstraps print "{d: <12}".format(str(datetime.datetime.now()))链接
之下
你在css中有两个主要的类，即css和.modal.fade

modal.in代表你的模态的初始状态

.modal.fade表示模态进入视口时的最终状态

然后在你的样式表中粘贴下面的代码

你可以复制下面的代码并调整它的行为。

.modal.in

.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, 100%) rotate(180deg) !important;
      -ms-transform: translate(0, 100%) rotate(180deg) !important;
       -o-transform: translate(0, 100%) rotate(180deg) !important;
          transform: translate(0, 100%) rotate(180deg) !important;
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 50%) rotate(360deg) scale(1.2, 1.2) !important;
      -ms-transform: translate(0, 50%)  rotate(360deg) scale(1.2, 1.2) !important;
       -o-transform: translate(0, 50%)  rotate(360deg) scale(1.2, 1.2) !important;
          transform: translate(0, 50%)  rotate(360deg) scale(1.2, 1.2) !important;
}

Answer 3

带效果的居中模式

＆＃13;

.anil {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all 1s linear;/*opening speed*/
  -o-transition: all 1s linear;/*opening speed*/
  transition: all 1s linear;/*opening speed*/
}

.anil.in {
  opacity: 1;
  transform: scale(1);/*size of the div to scal after .in class attached on opening modal*/
}
 .modal {
        top:30%!important;
    }

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Centered with animation</button>

  <!-- Modal -->
  <div class="modal anil" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

＆＃13;

Answer 4

http://dixso.github.io/custombox/ 你可以在这里得到帮助它已经逐步解释了

如何改变bootstrap模态开放过渡效果？

4 个答案: