模态淡入淡出不起作用答案

【问题标题】：modal fade not working模态淡入淡出不起作用
【发布时间】：2019-10-11 18:11:12
【问题描述】：

我有两个选项卡第一个选项卡向我显示年龄小于 40 的员工的详细信息，第二个选项卡向我显示年龄大于 40 的员工的详细信息，当我单击第一个选项卡并单击按钮显示时（whish在第一个选项卡下）为我在 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>

【问题讨论】：

标签： css angularjs bootstrap-modal

【解决方案1】：

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

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

According to MDN, "prefers-reduced-motion CSS 媒体功能用于检测用户是否已请求系统将其使用的动画或运动量降至最低。"他们在那里有在各种操作系统上更改此设置的说明。（Windows 方法对我有用：设置 > 轻松访问 > 显示 > 显示动画 [开]）

【讨论】：

如果您想强制 Bootstrap v4 转换并忽略 prefers-reduced-motion 媒体功能，您可以使用来自this gist的代码

【解决方案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

【讨论】：

【解决方案3】：

第二部分，情态部分不能在body上。将它移到头端下方，body 标签开始之前。

<head>
.... //heade code here
</head>
MODAL HERE
<body>....

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

【讨论】：

【解决方案4】：

您的按钮可以在主体内，但您的模式代码应该在主要部分之外。

<html>
  <head>
  </head>
  <body>
    <main>
      <!-- button to trigger modal -->
    </main>
    <!--modal code here -->
  </body>
</html>

【讨论】：