Question

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

请尝试使用此格式进行设计和放大模态工作。

<!-- 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

Answer 2

第二部分，模态部分不在身体上。将其移动到头端下方，并在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>

Answer 3

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

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

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

Answer 4

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

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

模态淡化不起作用

4 个答案: