Несколько базовых модалов на одной странице?

101
8

Я пытаюсь, чтобы несколько ссылок открывали различные модальности. Проблема, с которой я сталкиваюсь, заключается в том, что первые два модала работают нормально. Но любые модальности, которые я добавляю после этого, просто добавляют модальный снимок, вычеркивающий экран, но не отображающий модальность. Любые идеи, что я делаю неправильно?

Таким образом, эти два модала работают нормально:

<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">×</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">×</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>

Здесь ссылки:

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

<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">×</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>

Редактировать:

Еще один контекст. У меня есть ul с несколькими li которые должны каждый всплывать по своему собственному модальному, который позволяет пользователю выбирать возраст, пол, состояние и т.д.

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

спросил(а) 2014-10-11T03:37:00+04:00 5 лет, 9 месяцев назад
1
Решение
94

По-видимому, проблема заключалась в том, что модальные модели. Не уверен, почему состояние должно быть вторым. Но это работает:

<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">×</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">×</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">×</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>

ответил(а) 2014-10-11T20:47:00+04:00 5 лет, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема