模态淡入淡出不起作用

Question

我有两个选项卡第一个选项卡显示年龄小于 40 岁的员工的详细信息，第二个选项卡显示年龄大于 40 岁的员工的详细信息，当我单击第一个选项卡并单击按钮显示（小于 1st tab) 弹出为我在 bootstrap 中编写的表单生成。但是对于第二个选项卡，当我单击按钮时，它只会淡出，不会生成任何表单。当我使用 chrome 调试器时，我发现节点淡入淡出的 CSS 没有自动生成。我是 Bootstrap 的新手，请帮助我

<button  type="button"
    class="btn btn-info glyphicon glyphicon-plus"
    data-toggle="modal"
    data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
        Add URL
</button>

{{category.name}}{{$parent.$parent.$index}}{{$index}}

<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
     {{$parent.$parent.$index}} -- {{$index}}
     <div class="modal-dialog" role="document">
          <!-- Modal content-->
          <div class="modal-content" >{{category.name}}
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                  <form>
                      <p>
                          <input type="text" class="form-control"
                           name="uri" placeholder="Add URL" ng-model="uri">
                      </p>
                   </form>
               </div>
               <div class="modal-footer">
                   <button type="button" ng-click="addCustom()"
                           class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
                           data-dismiss="modal">Add</button>
                   <button type="button"
                           class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
                           data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
   </div>
</div>

Answer 1

我自己遇到了这个问题并找到了解决方案。Bootstrap 使用以下 CSS 媒体查询在某些情况下禁用模式淡入淡出动画（以及许多其他过渡和动画）：

@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: none;
    }
}

根据 MDN 的说法，“ prefers-reduced-motionCSS 媒体功能用于检测用户是否要求系统将其使用的动画或动作的数量降至最低。” 他们有在各种操作系统上更改此设置的说明。（Windows 方法对我有用：设置 > 轻松访问 > 显示 > 显示动画 [开]）

Answer 2

请尝试使用这种格式进行设计和模态工作。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       ...
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div>
   </div>
  </div>



 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

http://getbootstrap.com/javascript/#modals