How To Make Modals With Different Content

I want to make a website (done). Then I´m adding at least 30 buttons, and when you press the first button, a simple modal comes up with the ability to close, but when you press th

Solution 1:

just check this link http://www.w3schools.com/bootstrap/bootstrap_modal.asp it explain how modal works. You must have data-toggle="modal" data-target="#myModal" in item you click to open modal and you need mention "#myModal" as id of the target modal, use different id to open different modal.

Solution 2:

Using the sample you linked, I copied and pasted the first model div to a second and made minor changes so you can see the difference when clicking on the buttons. I then copied and pasted the button, and changed the data-target attribute in the second button to match the div I added.

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

Solution 3:

You can see my three modals, like i said you just need to change data-target="#myModal1" and id="myModal1" `https://jsfiddle.net/milanpanin/b2pyb6Lq/

Solution 4:

If you use Bootstrap modal u need just to change data-target and crate modals for all buttons.