CODEWITHSUNDEEP
cssangularjsbootstrap-modal
user2626388
user2626388

Reputation: 91

modal fade not working

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>

Upvotes: 8

Views: 33151

Answers (6)

silverface0i0l
silverface0i0l

Reputation: 31

This worked for me. Try adding display:block to your modal.

<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog" style="display:block"></div>

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22723

When click to show, bootstrap adds this HTML somewhere at the bottom of the page:

If you want you can add it manually and try:

<div class="modal-backdrop fade show"></div>

Upvotes: 0

Detroit Charan
Detroit Charan

Reputation: 209

Your button can be inside the body, but your modal code should be outside of the main section.

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

Upvotes: 0

cliambrown
cliambrown

Reputation: 281

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

Upvotes: 21

Ramiro
Ramiro

Reputation: 43

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>

Upvotes: 0

fool-dev
fool-dev

Reputation: 7777

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

Upvotes: 1

Related Questions