Tickster Styleguide

Appearance

Modal ​

When to use it ​

The Modal component is primarily a JavaScript component in this UI library, meaning it doesn't require any extra CSS for you as a developer. Just add the data-modal attribute to a link and its destination will be shown in a modal.

The CSS and JS that do the styling and displaying magic is done by the vendor JavaScript Lity, which is therefore required for it to work. It's however already bundled within the framework (vendor) files (both CSS and JS) so nothing extra for you to do here.

When using the Modal for inline content (i.e. an element already on the same page), you must make sure to add a u-hidden class to it. This is then toggled when opening and closing the modal.

TIP

For a vendor-less version of a similar modal, see Dialog

What it looks like ​

Code examples ​

html
<a data-modal href="https://www.tickster.com/">Tickster.com</a>
(opens in a modal box).
html
<a data-modal href="#inline-modal-example">Show on-page content</a>
<div class="u-hidden" id="inline-modal-example">
    <div class="c-card">
        <div class="c-card__body">
            <p>Hidden content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="c-card__foot">
            <button class="c-button" data-lity-close>Close</button>
        </div>
    </div>
</div>

Accessibility notes ​

Since adding JavaScript to control what a user can and cannot do on a page is tricky, there's always a risk that this component can cause accessibility problems. For example, having a very narrow/low modal that shows a very long <select> element can cause the menu to be cropped within the div's that this component produces, especially if the menu is "enhanced" by ChosenJS (see Form control for more info about this).