Несколько модальных с одной целью данных на одной странице

Question

Я использую модальный бутрап. У меня как пять модалов, и когда я открываю первый модал, остальные модалы тоже открываются. Как сделать это конкретным, когда я щелкаю по модалу без необходимости создавать больше класса или идентификатора для data-target?

<button class="btn btn-yellow detail"  data-toggle="modal" data-target=".detail">
  detail
</button>
<div class="modal fade detail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eos aut recusandae quos quisquam sint, veniam molestiae magnam fuga. Animi recusandae quis pariatur provident itaque, fugiat non minus nobis repellendus.
      </div>
    </div>
  </div>
</div>
<button class="btn btn-yellow detail"  data-toggle="modal" data-target=".detail">
  detail
</button>
<div class="modal fade detail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eos aut recusandae quos quisquam sint, veniam molestiae magnam fuga. Animi recusandae quis pariatur provident itaque, fugiat non minus nobis repellendus.
      </div>
    </div>
  </div>
</div>

Answer 1

Целью данных для вашей кнопки должен быть идентификатор, специфичный для модального окна, которое вы хотите открыть. В настоящее время цель данных открывает любую модель с классом детализации.

Попробуйте это, например:

<button class="btn btn-yellow detail"  data-toggle="modal" data-target="#detail1">
  detail
</button>
<div id="detail1" class="modal fade detail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eos aut recusandae quos quisquam sint, veniam molestiae magnam fuga. Animi recusandae quis pariatur provident itaque, fugiat non minus nobis repellendus.
      </div>
    </div>
  </div>
</div>
<button class="btn btn-yellow detail"  data-toggle="modal" data-target="#detail2">
  detail
</button>
<div id="detail2" class="modal fade detail" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi eos aut recusandae quos quisquam sint, veniam molestiae magnam fuga. Animi recusandae quis pariatur provident itaque, fugiat non minus nobis repellendus.
      </div>
    </div>
  </div>
</div>