How To Make Modals With Different Content
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">×</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">×</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.
Post a Comment for "How To Make Modals With Different Content"