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.

<divclass="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 --><buttontype="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 --><buttontype="button"class="btn btn-info btn-lg"data-toggle="modal"data-target="#myModal2">Open Modal</button><!-- Modal --><divclass="modal fade"id="myModal"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Modal Header</h4></div><divclass="modal-body"><p>Some text in the modal.</p></div><divclass="modal-footer"><buttontype="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 --><divclass="modal fade"id="myModal2"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Modal Header 2</h4></div><divclass="modal-body"><p>Some text in the modal. model 2</p></div><divclass="modal-footer"><buttontype="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.