rewrite modal docs without jquery

diff --git a/site/content/docs/4.3/components/modal.md b/site/content/docs/4.3/components/modal.md
index ca962f740c8b6e860207d067c7dcdd13afdba79e..df969bb4ca78b5560f354dc67a05553b0a862cac 100644 (file)
--- a/site/content/docs/4.3/components/modal.md
+++ b/site/content/docs/4.3/components/modal.md
@@ -18,8 +18,11 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
 
 {{< highlight js >}}
-$('#myModal').on('shown.bs.modal', function () {
-  $('#myInput').trigger('focus')
+var myModal = document.getElementById('myModal')
+var myInput = document.getElementById('myInput')
+
+myModal.addEventListener('shown.bs.modal', function () {
+  myInput.focus()
 })
 {{< /highlight >}}
 
@@ -540,15 +543,18 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 {{< /example >}}
 
 {{< 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
+var exampleModal = document.getElementById('exampleModal')
+exampleModal.addEventListener('show.bs.modal', function (event) {
+  // Button that triggered the modal
+  var button = event.relatedTarget
+  // Extract info from data-* attributes
+  var recipient = button.getAttribute('data-whatever')
   // If necessary, you could initiate an AJAX request here
   // and then do the updating in a callback.
+  //
   // Update the modal's content.
-  var modal = $(this)
-  modal.find('.modal-title').text('New message to ' + recipient)
-  modal.find('.modal-body input').val(recipient)
+  exampleModal.querySelector('.modal-title').textContent = 'New message to ' + recipient
+  exampleModal.querySelector('.modal-body input').value = recipient
 })
 {{< /highlight >}}
 
@@ -570,7 +576,7 @@ For modals that simply appear rather than fade in to view, remove the `.fade` cl
 
 ### Dynamic heights
 
-If the height of a modal changes while it is open, you should call `$('#myModal').modal('handleUpdate')` to readjust the modal's position in case a scrollbar appears.
+If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears.
 
 ### Accessibility
 
@@ -723,9 +729,9 @@ Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a cont
 
 ### Via JavaScript
 
-Call a modal with id `myModal` with a single line of JavaScript:
+Create a modal with a single line of JavaScript:
 
-{{< highlight js >}}$('#myModal').modal(options){{< /highlight >}}
+{{< highlight js >}}var myModal = new bootstrap.Modal(document.getElementById('myModal'), options){{< /highlight >}}
 
 ### Options
 
@@ -774,44 +780,55 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 {{< partial "callout-danger-async-methods.md" >}}
 {{< /callout >}}
 
-#### `.modal(options)`
+#### Passing options
 
 Activates your content as a modal. Accepts an optional options `object`.
 
 {{< highlight js >}}
-$('#myModal').modal({
+var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
   keyboard: false
 })
 {{< /highlight >}}
 
-#### `.modal('toggle')`
+#### toggle
 
 Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
 
-{{< highlight js >}}$('#myModal').modal('toggle'){{< /highlight >}}
+{{< highlight js >}}myModal.toggle(){{< /highlight >}}
 
-#### `.modal('show')`
+#### show
 
 Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
 
-{{< highlight js >}}$('#myModal').modal('show'){{< /highlight >}}
+{{< highlight js >}}myModal.show(){{< /highlight >}}
 
-#### `.modal('hide')`
+#### hide
 
 Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
 
-{{< highlight js >}}$('#myModal').modal('hide'){{< /highlight >}}
+{{< highlight js >}}myModal.hide(){{< /highlight >}}
 
-#### `.modal('handleUpdate')`
+#### handleUpdate
 
 Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
 
-{{< highlight js >}}$('#myModal').modal('handleUpdate'){{< /highlight >}}
+{{< highlight js >}}myModal.handleUpdate(){{< /highlight >}}
 
-#### `.modal('dispose')`
+#### dispose
 
 Destroys an element's modal.
 
+{{< highlight js >}}myModal.dispose(){{< /highlight >}}
+
+#### _getInstance
+
+*Static* method which allows you to get the modal instance associated with a DOM element
+
+{{< highlight js >}}
+var myModalEl = document.getElementById('myModal')
+var modal = bootstrap.Modal._getInstance(myModalEl) // Return a Bootstrap modal instance
+{{< /highlight >}}
+
 ### Events
 
 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
@@ -844,7 +861,8 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
 </table>
 
 {{< highlight js >}}
-$('#myModal').on('hidden.bs.modal', function (e) {
+var myModalEl = document.getElementById('myModal')
+myModalEl.addEventListener('hidden.bs.modal', function (e) {
   // do something...
 })
 {{< /highlight >}}