異なる内容のモーダルを作る方法

Question

私はウェブサイトを作りたい（完了）。それから私は少なくとも30のボタンを追加しています。そして、最初のボタンを押すと、単純なモーダルが閉じることができますが、2番目のボタンを押すと同じことが起こります！それは単なる別のコンテンツです。

私に悪いプログラミング言語でこれを伝えさせてください。

<div class="button" id="modal1">1</div> 

pressed = "modal1"が開いた場合。 pressed = "modal2"場合は

---

<div class="button" id="modal2">2</div> 

異なる内容で開きます。

私はいくつかのコードを追加することになりますが、私はhaven'tはもはやブートストラップより得た：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Answer 1

あなたはブートストラップを使用する場合はuはちょうどすべてのボタンのためのデータ・ターゲットとクレートのモーダルを変更する必要がモーダル。

Answer 2

このリンクを確認するhttp://www.w3schools.com/bootstrap/bootstrap_modal.aspモーダルがどのように機能するかを説明します。あなたはモーダルを開くためにクリックする項目にdata-toggle = "モーダル" data-target = "＃myModal"を持たなければならず、ターゲットモーダルのIDとして "#myModal"と言及する必要があります。

Answer 3

私はあなたがちょうどあなたがリンクされたサンプルを使用してdata-target="#myModal1" and id="myModal1" `https://jsfiddle.net/milanpanin/b2pyb6Lq/

Answer 4

を変更する必要があり、私はコピー＆ペースト秒に最初のモデルのdivをして軽微な変更を加えて言ったようにあなたは、私の3個のモーダルを見ることができますボタンをクリックすると違いを見ることができます。 その後、ボタンをコピーして貼り付け、2番目のボタンのデータターゲット属性を、追加したdivに一致するように変更しました。

 <div class="container"> 
      <h2>Modal Example</h2> 
      <!-- Trigger the modal with a button --> 

      <!-- data-target in the first button matches the id of the first div below --> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
     <!-- the second button data-target matches the id of thj e second div below --> 
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button> 
      <!-- Modal --> 
      <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Some text in the modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 

      </div> 
      </div> 

      <!-- this is copied from the first div, given its own id --> 
      <div class="modal fade" id="myModal2" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header 2</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Some text in the modal. model 2</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 

      </div> 
      </div> 
     </div>