mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
499 lines
40 KiB
499 lines
40 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Modal - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<button class="uk-button uk-button-default uk-float-right uk-margin-remove-adjacent" type="button" uk-toggle="target: #scrollbar">Toggle scrollbar</button>
|
|
|
|
<h1>Modal</h1>
|
|
|
|
<div class="uk-child-width-1-4@m" uk-grid>
|
|
<div>
|
|
|
|
<h2>Objects</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal" uk-toggle>Default</a>
|
|
<a class="uk-button uk-button-default" href="#modal-sections" uk-toggle>Sections</a>
|
|
<a class="uk-button uk-button-default" href="#modal-close-outside" uk-toggle>Close Outside</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Scrollbar</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-scrollbar" uk-toggle>Scrollbar</a>
|
|
<a class="uk-button uk-button-default" href="#modal-overflow" uk-toggle>Overflow Auto</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Sizes</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-container" uk-toggle>Container</a>
|
|
<a class="uk-button uk-button-default" href="#modal-expand" uk-toggle>Expand</a>
|
|
<a class="uk-button uk-button-default" href="#modal-widths" uk-toggle>Widths</a>
|
|
<a class="uk-button uk-button-default" href="#modal-full" uk-toggle>Full</a>
|
|
<a class="uk-button uk-button-default" href="#modal-full-split" uk-toggle>Full Split</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Center</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-center" uk-toggle>Center</a>
|
|
<a class="uk-button uk-button-default" href="#modal-center-scrollbar" uk-toggle>With scrollbar</a>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Media</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-media-image" uk-toggle>Image</a>
|
|
<a class="uk-button uk-button-default" href="#modal-media-video" uk-toggle>Video</a>
|
|
<a class="uk-button uk-button-default" href="#modal-media-youtube" uk-toggle>YouTube</a>
|
|
<a class="uk-button uk-button-default" href="#modal-media-vimeo" uk-toggle>Vimeo</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Dialogs</h2>
|
|
|
|
<p uk-margin>
|
|
<a id="js-modal-dialog" class="uk-button uk-button-default" href="#">Dialog</a>
|
|
<a id="js-modal-alert" class="uk-button uk-button-default" href="#">Alert</a>
|
|
<a id="js-modal-confirm" class="uk-button uk-button-default" href="#">Confirm</a>
|
|
<a id="js-modal-prompt" class="uk-button uk-button-default" href="#">Prompt</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Group</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-group-1" uk-toggle>Modal 1</a>
|
|
<a class="uk-button uk-button-default" href="#modal-group-2" uk-toggle>Modal 2</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<h2>Stack</h2>
|
|
|
|
<p uk-margin>
|
|
<a class="uk-button uk-button-default" href="#modal-stack-1" uk-toggle>Modal 1</a>
|
|
<a class="uk-button uk-button-default" href="#modal-stack-2" uk-toggle>Modal 2</a>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-muted uk-section-small uk-margin">
|
|
<div class="uk-float-left">Left</div>
|
|
<div class="uk-float-right">Right</div>
|
|
<div class="uk-container">Container</div>
|
|
</div>
|
|
|
|
<div id="scrollbar" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
|
|
<h2>JavaScript Options</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Value</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>container</code></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>Define a target container via a selector to specify where the modal should be appended in the DOM.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>esc-close</code></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>Close the modal when <em>Esc</em> key is pressed.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>bg-close</code></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>Close the modal when background is clicked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>stack</code></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>Stack modals, when more than one is open? By default, the previous modal will be hidden.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="modal" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<h2 class="uk-modal-title">Headline</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
<p class="uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<button class="uk-button uk-button-primary" type="button">Save</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-sections" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline</h2>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<button class="uk-button uk-button-primary" type="button">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-close-outside" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-outside" type="button" uk-close></button>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-scrollbar" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-overflow" class="uk-modal-container" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline</h2>
|
|
</div>
|
|
|
|
<div class="uk-modal-body" uk-overflow-auto>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<button class="uk-button uk-button-primary" type="button">Save</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-container" class="uk-modal-container" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-expand" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body uk-width-1-1">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-widths" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body uk-width-3-4@m uk-width-2-3@l uk-width-1-2@xl">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-full" class="uk-modal-full" uk-modal>
|
|
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" uk-height-viewport>
|
|
<button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
|
|
<div class="uk-width-xxlarge uk-padding-large">
|
|
<h1>Headline</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
</div>
|
|
|
|
<div id="modal-full-split" class="uk-modal-full" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-full" type="button" uk-close></button>
|
|
<div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
|
|
<div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div>
|
|
<div class="uk-padding-large">
|
|
<h1>Headline</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- uk-flex-top is needed to make vertical margin work for IE11 -->
|
|
<div id="modal-center" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
|
|
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-center-scrollbar" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
|
|
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
|
|
|
|
<div id="modal-media-image" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-outside" type="button" uk-close></button>
|
|
<img src="images/photo.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-media-video" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-outside" type="button" uk-close></button>
|
|
<video controls playsinline uk-video>
|
|
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
|
|
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-media-youtube" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-outside" type="button" uk-close></button>
|
|
<iframe src="https://www.youtube-nocookie.com/embed/YE7VzlLtp-4" width="560" height="315" frameborder="0" uk-video></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-media-vimeo" class="uk-flex-top" uk-modal>
|
|
<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
|
|
<button class="uk-modal-close-outside" type="button" uk-close></button>
|
|
<iframe src="https://player.vimeo.com/video/1084537" width="500" height="281" frameborder="0" uk-video></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-group-1" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline 1</h2>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<a href="#modal-group-2" class="uk-button uk-button-primary" uk-toggle>Next</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-group-2" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline 2</h2>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<a href="#modal-group-1" class="uk-button uk-button-primary" uk-toggle>Previous</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-stack-1" uk-modal>
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline 1</h2>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
<a href="#modal-stack-2" class="uk-button uk-button-primary" uk-toggle>Next</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-stack-2" uk-modal="stack: true">
|
|
<div class="uk-modal-dialog">
|
|
<button class="uk-modal-close-default" type="button" uk-close></button>
|
|
<div class="uk-modal-header">
|
|
<h2 class="uk-modal-title">Headline 2</h2>
|
|
</div>
|
|
<div class="uk-modal-body">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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="uk-modal-footer uk-text-right">
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
UIkit.util.on('#js-modal-dialog', 'click', function (e) {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
UIkit.modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>');
|
|
});
|
|
|
|
UIkit.util.on('#js-modal-alert', 'click', function (e) {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
UIkit.modal.alert('UIkit alert!').then(function () {
|
|
console.log('Alert closed.')
|
|
});
|
|
});
|
|
|
|
UIkit.util.on('#js-modal-confirm', 'click', function (e) {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
UIkit.modal.confirm('UIkit confirm!').then(function () {
|
|
console.log('Confirmed.')
|
|
}, function () {
|
|
console.log('Rejected.')
|
|
});
|
|
});
|
|
|
|
UIkit.util.on('#js-modal-prompt', 'click', function (e) {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
UIkit.modal.prompt('Name:', 'Your name').then(function (name) {
|
|
console.log('Prompted:', name)
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|