- Trap focus. Keyboard navigation never leaves the modal. Underlying content is not reachable.
- Height. Regarding content. If there is to much content use pagination or scrollbar.
- Highlight modals by making the background darker ( #000 * 0.5).
- Width. Modals containing tasks use .modal-lg for more space.
- Closing. 4 ways to close a modal (x | esc | close-button | click anywhere else).
No one likes to be interrupted but sometimes it is necessary to get a response before the users can go on with their specific tasks. Therefore we use modals which appear on top of the content so that the user can get additional information without leaving the actual screen. To catch the user’s full attention the background is greyed out/ disabled.
The modal is handled as an independent context. It has an individual headline, a modal specific content and a primary action. For keyboard navigation this means that the focus remains in the modal when users press tab or shift + tab.
There are several options to leave the modal. Either by clicking the “x”, cancel, outside the modal or by pressing the esc key.
Various modals
Small modal
Small modals are usually used to highlight important information or to warn the user about a particular thing. The user's interaction possibilities are usually very limited. Usually (s)he has the choice to confirm or to reject the given information. Show me the small modal
```html
```
Big modal
Modals where users can complete one or multiple tasks have the additional class “modal-lg” in the outer div and a max-width of 900px. Show me the big modal
```html
<div class="wui-bs-modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">
<i class="fa fa-times"></i>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body modal-body--has-sections">
<div class="modal-body__section modal-body__section--filter clearfix">
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--outline wui-btn--primary">New XYZ</a>
</div>
<div class="wui-inline-list__item">
<form class="wui-bs-form wui-bs-form--inline display--inline-block">
<div class="input-group hidden-xs hidden-sm">
<div class="wui-form-control-group wui-form-control-group--has-icon">
<input type="text" placeholder="A proper placeholder" autocomplete="off"
class="wui-form-control">
<span class="wui-form-control-icon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-body__section">
<p>One fine body…</p>
</div>
</div>
<div class="modal-footer">
<div class="wui-inline-list pull-left">
<div class="wui-inline-list__item">
<ul class="wui-pagination" role="navigation" aria-label="pagination">
<li class="wui-pagination__item wui-pagination__item--disabled">
<a href="#" aria-label="Previous">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
</li>
<li class="wui-pagination__item wui-pagination__item--active">
<a href="#">1</a>
</li>
<li class="wui-pagination__item">
<a href="#">2</a>
</li>
<li class="wui-pagination__item">
<a href="#">3</a>
</li>
<li class="wui-pagination__item">
<a href="#" aria-label="Next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="wui-inline-list pull-right">
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--link">
Cancel
</a>
</div>
<div class="wui-inline-list__item">
<a href="#" class="wui-btn wui-btn--outline wui-btn--primary">Secondary action</a>
</div>
<div class="wui-inline-list__item">
<a class="wui-btn wui-btn--primary">
Primary button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
```
Modal with tiles
These modales are a prime example in case the user can select one or more elements. On Grid and Content tiles you will find all the information you need, to build this component. Show me the tile modal
```html
```