modal 複数個 開いたら内容一緒 になる

Question

初心者です。

ホームページつくってます

modal を３つ使おうとしても
どうしても一つ目の内容が全てに適応されます。

検索したらキャッシュが効いている等の話がでますが
いまいち解決できません。

教えてください

エラーメッセージ

該当のソースコード

<div class="card-deck"> <!--card--> <div class="card"> <img class="card-img-top" src="pic/1card1.jpg" alt="Card image cap"> <div class="card-body"> <p class="text-muted"><b>ららららｒ</b></p> <p class="text-muted">ららららｒ</p> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">○○○</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

	 <img src="pic/card in 3.jpg">   
	 <div class="modal-body">  

	  
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

  </div>
</div>

</div> </div><!--modal end-->

</div>

</div> <div class="card"><!--card 2--> <img class="card-img-top" src="pic/1card2.jpg" alt="Card image cap"> <div class="card-body"> <p class="text-muted"><b>職員紹介</b></p> <p class="text-muted"></p> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> くわしく </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">○○○</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

	 <img src="pic/card in 3.jpg">   
	 <div class="modal-body">  

	  
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

  </div>
</div>

</div> </div><!--modal end-->

</div>

</div><!--card 2 end--> <div class="card"> <!--card 3--> <img class="card-img-top" src="pic/1-card3.jpg" alt="Card image cap"> <div class="card-body"> <p class="text-muted"><b>らららららら</b></p> <p class="text-muted">らららららら</p>

	  <!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> 詳細 </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">らららっらｒ</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div>

	 <img src="pic/card in 3.jpg">   
	 <div class="modal-body">  
    ○○○○○○○○○○○○○○○○○○
	  
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

  </div>
</div>

</div> </div><!--modal end-->

</div>

</div><!--card 3--> </div> <!--card all end -->

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

id の重複が原因ですね。あと、<code> でシンタックス使ってコードを見やすくしてください。

[takumataukma]

めっちゃ早いリアクションありがとうございます。id の重複ですね　これはIDをCSS に新しく追加いして　適応させる　でいいのでしょうか？？　素人質問ですみません

Answer 1

全部は書かないですが

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

この部分、で id を exampleModalCenter と指定していますね。
このIDのあたいは同一ページ内のHTMLで重複してはいけないというHTMLのルールがあります。