diff options
Diffstat (limited to 'docs/javascript/modal.md')
| -rw-r--r-- | docs/javascript/modal.md | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md index 5f748234d..1d018c80c 100644 --- a/docs/javascript/modal.md +++ b/docs/javascript/modal.md @@ -224,6 +224,88 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl </div> {% endhighlight %} +## Varying modal content based on trigger button + +Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](http://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on `relatedTarget`. + +<div class="bs-example" style="padding-bottom: 24px;"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> + + <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> + </div> +</div> + +{% highlight html %} +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button> +<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button> + +<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> + <h4 class="modal-title" id="exampleModalLabel">New message</h4> + </div> + <div class="modal-body"> + <form role="form"> + <div class="form-group"> + <label for="recipient-name" class="control-label">Recipient:</label> + <input type="text" class="form-control" id="recipient-name"> + </div> + <div class="form-group"> + <label for="message-text" class="control-label">Message:</label> + <textarea class="form-control" id="message-text"></textarea> + </div> + </form> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary">Send message</button> + </div> + </div> + </div> +</div> +{% endhighlight %} + +{% highlight js %} +$('#exampleModal').on('show.bs.modal', function (event) { + var button = $(event.relatedTarget) // Button that triggered the modal + var recipient = button.data('whatever') // Extract info from data-* attributes + // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). + // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. + var modal = $(this) + modal.find('.modal-title').text('New message to ' + recipient) + modal.find('.modal-body input').val(recipient) +}) +{% endhighlight %} + ## Usage The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. |