modal fade not working

Question

I have two tabs First tab display me the details of employee whose age is less then 40 and the second tab display me the details of employee whose age is grater then 40 when I click the 1st tab and click the button show (whish is under 1st tab) pop up get generated for a form I have written it in bootstrap . But for the second tab when I click the button it only fades up no form is generated . When I used chrome debugger I found CSS for nodal fade is not getting generated automatically . I am new in Bootstrap please help me

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

Solution 1

I had this problem myself and found the solution. Bootstrap uses the following CSS media query to disable the modal fade animation (and a number of other transitions and animations) in certain circumstances:

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

According to MDN, "The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses." They have instructions there for changing this on various operating systems. (The Windows method worked for me: Settings > Ease of Access > Display > Show animations [On])

Solution 2

Please try to this format for design & modal work.

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

Solution 3

The seccond part, the modal part mus not be on the body. Move it just below the head ends, and before the body tag start.

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

Comments

[robsonsanches]

If you want to force Bootstrap v4 trasitions and ignore the prefers-reduced-motion media feature you can use the code from this gist