Multiple Backbone modals on the same page?

0
votes

I'm trying to let multiple links open various modals. The problem I'm running into is that the first two modals work fine. But any modals I add after that just seem to add the modal-drop graying out the screen but never display the modal. Any ideas what I'm doing wrong?

So these two modals work fine:

<div class="modal fade" id="ageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select ages that should be included:</h5>
        <p>Enter comma separated ages (e.g. 13,14,15,16)</p>
        <p>You can also specify ranges (e.g. 18-34)</p>
        <textarea class="ages"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="genderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Gender Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select genders that should be included:</h5>
        <input type="checkbox" id="male"><label for="#male"> Male</label>
        <br>
        <input type="checkbox" id="female"><label for="#female"> Femle</label>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

Here's the links:

<li class="add-qualification" data-toggle="modal" data-target="#ageModal">
                Age
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#genderModal">
                Gender
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>

However when I try to add a third modal, it just adds the backdrop:

<li class="add-qualification" data-toggle="modal" data-target="#stateModal">
                State
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>

<div class="modal fade" id="stateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select states that should be included:</h5>
        <select>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

Edit:

Some more context. I have a ul with a number of li's that should each pop up their own modal that allows the user to choose age, gender, state, etc. 

<div class="targeting">
        <div class="row">
          <div class="col-sm-4">
            <h5>Targeting options</h5>
            <ul class="targeting-list">
              <li class="add-qualification" data-toggle="modal" data-target="#ageModal">
                Age
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#genderModal">
                Gender
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
              <li class="add-qualification" data-toggle="modal" data-target="#stateModal">
                State
                <div class="controls">
                  <i class="fa fa-angle-right"></i>
                </div>
              </li>
1
twitter-bootstrapmodal-dialogbootstrap-modal
You seem to be incorrectly using <li>s instead of <a>s. LI stands for "list item", not "link". - cvrebert
See my edit above. Do I need to have <a>'s inside of the <li>'s? If so, do you know why it works on the first two modals to pop them up? - Tom Hammond

1 Answers

0
votes

Apparently the issue was the order of the modals. Not sure why state has to be second. But this works:

<div class="modal fade" id="ageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select ages that should be included:</h5>
        <p>Enter comma separated ages (e.g. 13,14,15,16)</p>
        <p>You can also specify ranges (e.g. 18-34)</p>
        <textarea class="ages"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="stateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Age Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select states that should be included:</h5>
        <select>
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
          <option value="CA">California</option>
          <option value="CO">Colorado</option>
          <option value="CT">Connecticut</option>
          <option value="DE">Delaware</option>
          <option value="FL">Florida</option>
          <option value="GA">Georgia</option>
          <option value="HI">Hawaii</option>
          <option value="ID">Idaho</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Louisiana</option>
          <option value="ME">Maine</option>
          <option value="MD">Maryland</option>
          <option value="MA">Massachusetts</option>
          <option value="MI">Michigan</option>
          <option value="MN">Minnesota</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="MT">Montana</option>
          <option value="NE">Nebraska</option>
          <option value="NV">Nevada</option>
          <option value="NH">New Hampshire</option>
          <option value="NJ">New Jersey</option>
          <option value="NM">New Mexico</option>
          <option value="NY">New York</option>
          <option value="NC">North Carolina</option>
          <option value="ND">North Dakota</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="OR">Oregon</option>
          <option value="PA">Pennsylvania</option>
          <option value="RI">Rhode Island</option>
          <option value="SC">South Carolina</option>
          <option value="SD">South Dakota</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="UT">Utah</option>
          <option value="VT">Vermont</option>
          <option value="VA">Virginia</option>
          <option value="WA">Washington</option>
          <option value="WV">West Virginia</option>
          <option value="WI">Wisconsin</option>
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="genderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Gender Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select genders that should be included:</h5>
        <input type="checkbox" id="male"><label for="#male"> Male</label>
        <br>
        <input type="checkbox" id="female"><label for="#female"> Femle</label>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>