Modal docs: Added JS event handler for relatedTarget demo

Fixes #17584
Closes #17607 by merging it

1 files changed, 11 insertions, 0 deletions

diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index c522b1399..69520e947 100644
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -36,6 +36,17 @@
       e.preventDefault()
     })
 
+    // 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)
+    })
+
     // Insert copy to clipboard button before .highlight
     $('.highlight').each(function () {
       var btnHtml = '<div class="bd-clipboard"><span class="btn-clipboard" title="Copy to clipboard">Copy</span></div>'