diff --git a/docs/components/alerts.md b/docs/components/alerts.md index f11f8fbfa2..bae46ee912 100644 --- a/docs/components/alerts.md +++ b/docs/components/alerts.md @@ -64,3 +64,94 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi Oh snap! Change a few things up and try submitting again. {% endexample %} + + +## Examples + +{% example html %} + +{% endexample %} + +When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup. + +{% example html %} + +{% endexample %} + +## Usage + +Enable dismissal of an alert via JavaScript: + +{% highlight js %} +$(".alert").alert() +{% endhighlight %} + +### Markup + +Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM. + +{% highlight html %} + +{% endhighlight %} + +To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them. + +### Methods + +#### $().alert() + +Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) + +#### $().alert('close') + +Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. + +{% highlight js %}$(".alert").alert('close'){% endhighlight %} + +### Events + +Bootstrap's alert plugin exposes a few events for hooking into alert functionality. + +
+ + + + + + + + + + + + + + + + + +
Event TypeDescription
close.bs.alertThis event fires immediately when the close instance method is called.
closed.bs.alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete).
+
+ +{% highlight js %} +$('#myAlert').on('closed.bs.alert', function () { + // do something… +}) +{% endhighlight %} diff --git a/docs/javascript/alerts.md b/docs/javascript/alerts.md deleted file mode 100644 index 9b677a7656..0000000000 --- a/docs/javascript/alerts.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -layout: page -title: Alerts ---- - -Add dismiss functionality to all alert messages with this plugin. - -## Examples - -{% example html %} - -{% endexample %} - -When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup. - -{% example html %} - -{% endexample %} - -## Usage - -Enable dismissal of an alert via JavaScript: - -{% highlight js %} -$(".alert").alert() -{% endhighlight %} - -### Markup - -Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM. - -{% highlight html %} - -{% endhighlight %} - -To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them. - -### Methods - -#### $().alert() - -Makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) - -#### $().alert('close') - -Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed. - -{% highlight js %}$(".alert").alert('close'){% endhighlight %} - -### Events - -Bootstrap's alert plugin exposes a few events for hooking into alert functionality. - -
- - - - - - - - - - - - - - - - - -
Event TypeDescription
close.bs.alertThis event fires immediately when the close instance method is called.
closed.bs.alertThis event is fired when the alert has been closed (will wait for CSS transitions to complete).
-
- -{% highlight js %} -$('#myAlert').on('closed.bs.alert', function () { - // do something… -}) -{% endhighlight %}