mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Docs: update documentation js examples, using es6 (#36203)

Browse Source 
* Docs: update components documentation using es6

* Docs: update js blocks around docs, using es6

* Docs: update components documentation using es6

* Test linter
This commit is contained in:
GeoSot
2022-04-26 19:38:41 +03:00
committed by GitHub
parent 3edead4ffe
commit 00d45b11e7
21 changed files with 504 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/components/modal.md
+17 -15
View File
@@ -18,10 +18,10 @@ 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:
```js
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myModal.addEventListener('shown.bs.modal', () => {
myInput.focus()
})
```
@@ -478,20 +478,20 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
{{< /example >}}
```js
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
// Button that triggered the modal
var button = event.relatedTarget
const button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
const recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
const modalTitle = exampleModal.querySelector('.modal-title')
const modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalTitle.textContent = `New message to ${recipient}`
modalBodyInput.value = recipient
})
```
@@ -815,7 +815,9 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
Create a modal with a single line of JavaScript:
```js
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)
```
### Options
@@ -843,7 +845,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Activates your content as a modal. Accepts an optional options `object`.
```js
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
const myModal = new bootstrap.Modal('#myModal', {
keyboard: false
})
```
@@ -852,7 +854,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
| Method | Description |
| --- | --- |
| `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). |
| `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). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
| `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). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
| `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). |
| `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). |
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
@@ -875,8 +877,8 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
{{< /bs-table >}}
```js
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
// do something...
})
```