<h2 id="alerts-usage">Usage</h2>
- <p>Enable dismissal of an alert via JavaScript:</p>
- {% highlight js %}$(".alert").alert(){% endhighlight %}
- <h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
- {% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>{% endhighlight %}
+
+{% highlight html %}
+<button type="button" class="close" data-dismiss="alert">
+ <span aria-hidden="true">×</span>
+ <span class="sr-only">Close</span>
+</button>
+{% endhighlight %}
+
+ <p>To have your alerts use animation when closing, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<h3>Methods</h3>
<h4>$().alert()</h4>
- <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+ <p>Makes an alert listen for click events on descendant elements which have the <code>data-dismiss="alert"</code> attribute. (Not necessary when using the data-api's auto-initialization.)</p>
- <h4>.alert('close')</h4>
+ <h4>$().alert('close')</h4>
<p>Closes an alert.</p>
- {% highlight js %}$(".alert").alert('close'){% endhighlight %}
<h3>Events</h3>
</table>
</div><!-- /.table-responsive -->
{% highlight js %}
-$('#my-alert').on('closed.bs.alert', function () {
+$('#myAlert').on('closed.bs.alert', function () {
// do something…
})
{% endhighlight %}