Modal & Overlay
Dialoge, Dropdown-Menüs, Tooltips und Off-Canvas-Navigationen für interaktive Benutzeroberflächen.
Modal-Dialog
Benutzer bearbeiten
Löschen bestätigen
Soll der Benutzer Max Mustermann wirklich gelöscht werden? Diese Aktion kann nicht rückgängig gemacht werden.
HTML
<!-- Trigger -->
<button uk-toggle="target: #my-modal">Modal öffnen</button>
<!-- Modal -->
<div id="my-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" uk-close></button>
<h2 class="uk-modal-title">Titel</h2>
<p>Inhalt...</p>
<button class="uk-button uk-button-default uk-modal-close">Schließen</button>
</div>
</div>Dropdown
HTML
<div class="uk-inline">
<button class="uk-button uk-button-default">Aktionen</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Bearbeiten</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Löschen</a></li>
</ul>
</div>
</div>Tooltip
HTML
<button uk-tooltip="Tooltip-Text">Hover</button>
<button uk-tooltip="title: Unten; pos: bottom">Hover</button>
<button uk-tooltip="title: Links; pos: left">Hover</button>