This project focuses on Modal features, but without using built-in HTML tags or JavaScript APIs, like <dialog> HTML tag, or JavaScript Popover API. Clicking over a button, for example, "Edit content", this will be able to simply open a modal with the context of the clicked button, in this case, a random content.
By default, the project comes with two templates, inside the templates folder. If you notice, both will follow a standard HTML structure like this:
<html>
<body>
<template>
<!-- A modal wrapper, starting with a "display: none" -->
<div data-modal="hello-world" data-modal-visibility="hidden" style="display: none;">
<div data-modal-content="hello-world">
<!-- A close button -->
<span data-close-modal="hello-world" class="material-symbols-outlined close-btn" role="button">close</span>
<div>...</div>
</div>
</div>
<!-- A button to open the modal wrapper -->
<button data-open-modal="hello-world" class="modal-btn">
...
</button>
</template>
</body>
</html>After creating a new template, you need to loading it by adding it to the modals > modals-loader.ts file, in the src folder, at the modalsTemplatesNames array, inside the getModalTemplates() function. Once the template is loaded, the script will handle toggling the modal visibility.
If you want, take a look at the online version of this project - clicking on the follow link, you will be able to try it out: modals.vinicius-goncalves.com.