From 594831f4f3f3c1164812cfdd60497fe6d7438376 Mon Sep 17 00:00:00 2001
From: Chris Rebert <code@rebertia.com>
Date: Mon, 3 Nov 2014 13:37:27 -0800
Subject: [PATCH] Add event.relatedTarget + `data-*` example to Modal docs
Fixes #14245
---
docs/_includes/js/modal.html | 80 ++++++++++++++++++++++++++++++
docs/_includes/nav/javascript.html | 1 +
docs/assets/js/src/application.js | 11 ++++
3 files changed, 92 insertions(+)
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index 1bb606ab8e..22924b4e7f 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -211,6 +211,86 @@
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
...
</div>
+{% endhighlight %}
+
+ <h2 id="modals-related-target">Varying modal content based on trigger button</h2>
+ <p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
+ <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>
+ ...more buttons...
+
+ <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><!-- /.modal -->
+ </div><!-- /.bs-example -->
+{% 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>
+...more buttons...
+
+<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 %}
<h2 id="modals-usage">Usage</h2>
diff --git a/docs/_includes/nav/javascript.html b/docs/_includes/nav/javascript.html
index 3459bb1e4c..a1695bce82 100644
--- a/docs/_includes/nav/javascript.html
+++ b/docs/_includes/nav/javascript.html
@@ -17,6 +17,7 @@
<li><a href="#modals-examples">Examples</a></li>
<li><a href="#modals-sizes">Sizes</a></li>
<li><a href="#modals-remove-animation">Remove animation</a></li>
+ <li><a href="#modals-related-target">Varying content based on trigger button</a></li>
<li><a href="#modals-usage">Usage</a></li>
</ul>
</li>
diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 571645e5f1..c85c59dae9 100644
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -109,6 +109,17 @@
}, 3000)
})
+ // Modal relatedTarget demo
+ $('#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)
+ })
+
// Activate animated progress bar
$('.bs-docs-activate-animated-progressbar').on('click', function () {
$(this).siblings('.progress').find('.progress-bar-striped').toggleClass('active')
--
GitLab