From 594831f4f3f3c1164812cfdd60497fe6d7438376 Mon Sep 17 00:00:00 2001 From: Chris Rebert 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 @@ +{% endhighlight %} + + +

Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on relatedTarget,

+
+ + + + ...more buttons... + + +
+{% highlight html %} + + + +...more buttons... + + +{% 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

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 @@
  • Examples
  • Sizes
  • Remove animation
    • +
  • Varying content based on trigger button
  • Usage
    • 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')