let's get started.
First, you need to include necessary files from CDN
<!DOCTYPE html>
<html>
<head>
<title>Uikit Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<!-- This is a button toggling the modal -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button"
uk-toggle="target: #modal-example">Open</button>
<!-- This is an anchor toggling the modal -->
<a href="#modal-example" uk-toggle>Open</a>
<!-- This is the modal -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<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>
</body>
</html>
To open the modal on page load you need to include script file with some code
which is given below
<script>
UIkit.modal('#modal-example').show();
</script>
After setup final page should look like this
<!DOCTYPE html>
<html>
<head>
<title>Uikit Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/css/uikit.min.css" />
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<!-- This is a button toggling the modal -->
<button class="uk-button uk-button-default uk-margin-small-right" type="button"
uk-toggle="target: #modal-example">Open</button>
<!-- This is an anchor toggling the modal -->
<a href="#modal-example" uk-toggle>Open</a>
<!-- This is the modal -->
<div id="modal-example" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<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>
<script>
UIkit.modal('#modal-example').show();
</script>
</body>
</html>
![[Cupons] Paid udemy courses for free](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa-f_8UEE95d9stpdRzq6_DUq19avn09M2CVWIuQGI_PwaZBMcNhuHmPZQsw81GMeWwUY2Q-Cr66RoAmMq1f_pok6pdv-W86qc9_wWSxqXEq_RHYyRY0Ldly_yi2DSfyed4Cxiks6Nbzp/w680/Paid+udemy+courses+for+free.png)
0 Comments
If you have any question please ask?