{{!--<div class="site-example--content slds-scrollable--x slds-tabs__content slds-show" role="tabpanel">
    <div class="slds-p-horizontal--medium">--}}
        <h4 class="site-text-heading--medium">Markup</h4>
        <p><strong>Suggested edits to SLDS markup:</strong></p>
        <ul class="slds-m-bottom--large">
            <li>Add the <code>slds-hide</code> class to <code>slds-modal</code> elements to prevent modals from appearing before the plugin initializes</li>
            <li>The <code>slds-backdrop</code> element is not required; backdrops are managed by the plugin</li>
            <li>Set the <code>aria-hidden</code> attribute to <code>true</code> to have screen readers ignore modal content before the plugin initializes</li>
        </ul>
{{#aljs-pre-container type="html"}}
<button class="slds-button slds-button--neutral" data-aljs="modal" data-aljs-show="modal-1">Open Modal 1</button>
<button class="slds-button slds-button--neutral" data-aljs="modal" data-aljs-show="modal-2">Open Modal 2</button>
<div id="modal-1" aria-hidden="true" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" class="slds-modal slds-fade-in-open slds-hide">
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <h2 id="modal-heading-1" class="slds-text-heading--medium">Modal 1</h2>
            <button class="slds-button slds-button--icon-inverse slds-modal__close" data-aljs-dismiss="modal">
                <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
                    <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
                </svg>
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <div>
                <p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</p>
            </div>
        </div>
        <div class="slds-modal__footer">
            <button class="slds-button slds-button--neutral" data-aljs-dismiss="modal">Cancel</button>
            <button class="slds-button slds-button--neutral slds-button--brand" data-aljs-dismiss="modal">Save</button>
        </div>
    </div>
</div>
<div id="modal-2" aria-hidden="true" tabindex="-1" role="dialog" aria-labelledby="modal-heading-2" class="slds-modal slds-fade-in-open slds-hide">
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <h2 id="modal-heading-2" class="slds-text-heading--medium">Modal 2</h2>
            <button class="slds-button slds-button--icon-inverse slds-modal__close" data-aljs-dismiss="modal">
                <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
                    <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
                </svg>
                <span class="slds-assistive-text">Close</span>
            </button>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <div>
                <p>Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing.</p>
            </div>
        </div>
        <div class="slds-modal__footer slds-modal__footer--directional">
            <button class="slds-button slds-button--neutral" data-aljs-dismiss="modal">Skip This Step</button>
            <button class="slds-button slds-button--brand" data-aljs-dismiss="modal">Save &amp; Next</button>
        </div>
    </div>
</div>
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table gives you a quick overview of ALJS-specific markup applied to the SLDS component.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">ALJS Markup</th>
                        <th scope="col">Outcome</th>
                        <th scope="col">Required</th>
                        <th scope="col">Applied to</th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>data-aljs="modal"</code></th>
                        <td data-label="Outcome">Provides a unique identifier for the plugin</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                        <td data-label="Applied to" class="slds-cell-shrink">Any element</td>
                        <td data-label="Comments"></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-show="</code><em>modal-id</em><code>"</code></th>
                        <td data-label="Outcome">Assigns the role of showing the specified modal id on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span>--></td>
                        <td data-label="Applied to" class="slds-cell-shrink">Any element</td>
                        <td data-label="Comments">While not required, it is recommended to bind modal showings through this method rather than with methods (see 'Methods' section)</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>data-aljs-dismiss="modal"</code></th>
                        <td data-label="Outcome">Assigns the role of dismissing modals on click</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span>--></td>
                        <td data-label="Applied to" class="slds-cell-shrink">Any element</td>
                        <td data-label="Comments">While not required, it is recommended to bind modal dismisses through this method rather than with methods (see 'Methods' section)</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="modal"]').modal();
});
{{/aljs-pre-container}}
        <h4 class="site-text-heading--medium">Initialize with Options</h4>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('[data-aljs="modal"]').modal({
        backdropDismiss: false,
        dismissSelector: '[data-aljs-dismiss="modal"]',
        onShow: function(obj) {},
        onShown: function(obj) {},
        onDismiss: function(obj) {},
        onDismissed: function(obj) {}
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the options available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Default value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>backdropDismiss</code></th>
                        <td data-label="Behavior">Determines whether or not modals will be dismissed if the backdrop is clicked</td>
                        <td data-label="Accepted values"><code>true</code>, <code>false</code></td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>false</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismissSelector</code></th>
                        <td data-label="Behavior">Binds all elements matching the selector to dismiss modals on click</td>
                        <td data-label="Accepted values">Any selector</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>'[data-aljs-dismiss="modal"]'</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onShow</code></th>
                        <td data-label="Behavior">Calls a function when a modal begins its 'show' animation in the DOM</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onShown</code></th>
                        <td data-label="Behavior">Calls a function when a modal completes its 'show' animation in the DOM</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onDismiss</code></th>
                        <td data-label="Behavior">Calls a function when a modal begins its 'dismiss' animation in the DOM</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                    <tr>
                        <th scope="row"><code>onDismissed</code></th>
                        <td data-label="Behavior">Calls a function when a modal completes its 'dismiss' animation in the DOM</td>
                        <td data-label="Accepted values">Any callback function</td>
                        <td data-label="Default value" class="slds-cell-shrink"><code>function(obj) {}</code></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Methods</h4>
{{#aljs-pre-container type="js"}}
$('#modal-1').modal('show');
$('#modal-2').modal('dismiss');
$('[data-aljs-show="modal-1"]').modal('trigger');
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the methods available for the jQuery function.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Method</th>
                        <th scope="col">jQuery object</th>
                        <th scope="col">Outcome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>show</code></th>
                        <td data-label="jQuery object">The target modal</td>
                        <td data-label="Outcome">The target modal begins its 'show' animation in the DOM</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismiss</code></th>
                        <td data-label="jQuery object">The target modal</td>
                        <td data-label="Outcome">The target modal begins its 'dismiss' animation in the DOM</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>trigger</code></th>
                        <td data-label="jQuery object">The target element with a <code>data-aljs-show</code> attribute</td>
                        <td data-label="Outcome">The element's target modal begins its 'show' animation in the DOM</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Initialize on Body</h4>
        <p class="slds-m-bottom--medium">The following method of initializing supports markup added to the DOM post-initialization and all options.</p>
{{#aljs-pre-container type="js"}}
$(document).ready(function() {
    $('body').modal({
        selector: '[data-aljs="modal"]'
    });
});
{{/aljs-pre-container}}
        <p class="slds-m-top--medium">This table details the options specific to initializing on the body.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Option</th>
                        <th scope="col">Behavior</th>
                        <th scope="col">Values</th>
                        <th scope="col">Required</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>selector</code></th>
                        <td data-label="Behavior">Allows elements matching the selector to show modals on click, regardless of whether or not they were present during initialization</td>
                        <td data-label="Values">Any selector</td>
                        <td data-label="Required" class="slds-cell-shrink">
                            <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/icons/utility-sprite/svg/symbols.svg#check"></use>
                            </svg><span class="slds-assistive-text">Required</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h4 class="site-text-heading--medium">Events</h4>
        <p>This table details the JavaScript events that trigger from user interaction.</p>
        <div class="slds-scrollable--x">
            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked slds-no-row-hover slds-m-top--medium">
                <thead>
                    <tr class="site-text-heading--label">
                        <th scope="col">Event</th>
                        <th scope="col">Element</th>
                        <th scope="col">Trigger</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row"><code>show.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-modal</code> being shown</td>
                        <td data-label="Trigger">A modal begins its 'show' animation in the DOM</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>shown.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-modal</code> being shown</td>
                        <td data-label="Trigger">A modal completes its 'show' animation in the DOM</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismiss.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-modal</code> being dismissed</td>
                        <td data-label="Trigger">A modal begins its 'dismiss' animation in the DOM</td>
                    </tr>
                    <tr>
                        <th scope="row"><code>dismissed.aljs.modal</code></th>
                        <td data-label="Element">The <code>.slds-modal</code> being dismissed</td>
                        <td data-label="Trigger">A modal completes its 'dismiss' animation in the DOM</td>
                    </tr>
                </tbody>
            </table>
        </div>
    {{!--</div>
</div>--}}