Jump to content

Bootstrap Modal - something's wrong with my code or something


Recommended Posts

Alright so this is probably mostly a debugging issue. I just cannot seem to pinpoint what is wrong with the following code:

<div ng-repeat="z in m2ExtraLinks" class="m2Details">  <li data-toggle="modal" data-target="#{{z.id}}">{{z.name}}</li>  <div class="modal fade m2Details" id="{{z.id}}" role="dialog">    <div class="modal-dialog">       <div class="modal-content">         <div class="modal-header">           <button type="button" class="close" data-dismiss="modal">×</button>           <h4 class="modal-title">Modal Header</h4>         </div>         <div class="modal-body">           <p>Body</p>         </div>         <div class="modal-footer">           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         </div>       </div>     </div>   </div> </div>

Absolutely nothing happens. No errors when I click the list items. No errors otherwise. Nothing.


Ofcourse, I've already tried my own debugging to figure out this problem. I've discovered that if I paste w3school's tutorial right where my current code is something happens: but it is still not a desired effect. The whole screen dims..like it is suppose to, but also the modal itself is darkened.


I've also "inspect element" on the output of my HTML and it is all showing as expected..but still, nothing happens if I try to hand code it in instead of using Angular.


This is my first time taking a crack at "modal", so I am sure I am doing something wrong. Anyone got any clue what that is?


The expected result with my code is that for each list item that gets displayed from the ng-repeat, there will also be its own modal that pops up when the list item is clicked.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...