<p>Our Modal plugin is a <strong>super</strong> slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.</p>
<p>Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.</p>
<li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
<thead>
<li><strong>closeOnEscape</strong> (<code>boolean</code>) - if true, it will close the modal when escape key is pressed.</li>
<tr>
</ul>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 50px;">type</th>
<thstyle="width: 50px;">default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>backdrop</td>
<td>boolean</td>
<td>false</td>
<td>Includes a modal-backdrop element</td>
</tr>
<tr>
<td>keyboard</td>
<td>boolean</td>
<td>false</td>
<td>Closes the modal when escape key is pressed</td>
</tr>
<tr>
<td>show</td>
<td>boolean</td>
<td>false</td>
<td>Opens modal on class initialization</td>
</tr>
</tbody>
</table>
<h3>Markup</h3>
<p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
<p><spanclass="label notice">Notice</span> If you want your modal to animate in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>$().modal</h4>
<h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>. If you want your modal to fade in and out, just add a <code>.fade</code> class to your <code>.modal</code> element (refer to the demo to see this in action).</p>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
<p><spanclass="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
<h3>Events</h3>
<h3>Events</h3>
<p>Bootstraps modal class makes use of custom events. You can use <code>trigger</code> to make things happen manually or <code>bind</code> to listen for things happening.</p>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:</p>
<li><strong>hidden</strong> - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</li>
<p>To quickly add dropdown functionality to any nav element, use the <code>data-dropdown</code> attribute. Any valid bootstrap dropdown will automatically be activated.</p>
<p><spanclass="label notice">Notice</span> If your ui has several dropdowns, consider adding the <code>data-dropdown</code> attribute to a more significant container element like <code>.tabs</code> or <code>.topbar</code>.
<h3>Methods</h3>
<h4>$().dropdown()</h4>
<p>
<p>
Activates menus for given topbar or tabbed navigation.
A programatic api for activating menus for a given topbar or tabbed navigation.
<p><spanclass="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code><a href="#home">home</a></code> might correspond to a <code><div id="home"></div></code>.
<strong>Note:</strong> Topbar anchor tags must have resolvable id targets like <code><a href="#home">home</a></code>.
</p>
</p>
<h3>Events</h3>
<h4>.scrollspy('refresh')</h4>
<h4>scrollspy:refresh</h4>
<p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body like below.</p>
<p>The scrollspy caches nav buttons and anchor locations. If you need to update the cache (because you have dynamic content) just trigger the <code>scrollspy:refresh</code> event.</p>
<p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
