mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 06:03:10 +02:00
Code Issues Releases Wiki Activity

Changes to Alert component to match the others (#33402)

Browse Source 
Alert.js: Refactor code to match the other components
* Use this._element
* Remove handleDismiss method and keep its functionality on event
* Change JqueryInterface to be more generic
* Correct docs to be aligned with code, and add undocumented functionality
* Update alerts.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot
2021-06-28 16:34:47 +03:00
committed by GitHub
parent 45d26de728
commit 70dd7f6ff5
3 changed files with 61 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
site/content/docs/5.0/components/alerts.md
View File

@@ -147,35 +147,39 @@ Loop that generates the modifier classes with the `alert-variant()` mixin.
## JavaScript behavior
### Triggers
### Initialize
Enable dismissal of an alert via JavaScript:
Initialize elements as alerts
```js
var alertList = document.querySelectorAll('.alert')
alertList.forEach(function (alert) {
new bootstrap.Alert(alert)
var alerts = [].slice.call(alertList).map(function (element) {
return new bootstrap.Alert(element)
})
```
{{< callout info >}}
For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed.
Or with `data` attributes on a button **within the alert**, as demonstrated above:
See the [triggers](#triggers) section for more details.
{{< /callout >}}
### Triggers
Dismissal can be achieved with `data` attributes on a button **within the alert** as demonstrated above:
```html
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
```
Note that closing an alert will remove it from the DOM.
or on a button **outside the alert** using the `data-bs-target` as demonstrated above:
### Methods
You can create an alert instance with the alert constructor, for example:
```js
var myAlert = document.getElementById('myAlert')
var bsAlert = new bootstrap.Alert(myAlert)
```html
<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
```
This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
**Note that closing an alert will remove it from the DOM.**
### Methods
<table class="table">
<thead>