1ページに同じデータターゲットを持つ複数のモーダル

Question

私はbootrapモーダルを使用しています。私は5つのモーダルを持っていますが、最初のモーダルを開くと残りのモーダルも開きます。私は、データターゲット上でより多くのクラスやIDを作成することなく、モーダルをクリックすると、それを具体的にする方法は？

<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

ボタンのデータターゲットは、開いているモーダル固有のIDにする必要があります。現在、データターゲットは詳細クラスを持つモデルを開きます。

例えば、これを試してみてください：

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