Author: | tomaszbujnowicz |
---|---|
Views Total: | 712 views |
Official Page: | Go to website |
Last Update: | November 23, 2021 |
License: | MIT |
Preview:

Description:
A JavaScript library for creating accessible modal windows using the trending Tailwind CSS framework.
How to use it:
1. Import the needed Tailwind CSS and Modal component.
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> <script src="modal.js"></script>
2. Initialize the modal component.
document.addEventListener("DOMContentLoaded", function() { modal.init() });
3. Enable a button (or a link) to toggle a basic modal window.
<button data-modal-trigger aria-controls="modal-name" aria-expanded="false" type="button"> Open modal </button>
<div id="modal-name" data-modal-target class="hidden"> <div class="flex items-center justify-center fixed inset-0 z-50"> <div data-modal-close data-modal-overlay tabindex="-1" data-class-in="opacity-50" data-class-out="opacity-0" class="opacity-0 fixed inset-0 w-full z-40 transition-opacity duration-300 bg-black select-none"></div> <div data-modal-wrapper data-class-in="opacity-100 translate-y-0" data-class-out="opacity-0 translate-y-5" class="opacity-0 translate-y-5 w-full z-50 overflow-auto max-w-md max-h-screen scrolling-touch transition-all duration-300 bg-white flex flex-col transform shadow-xl rounded-md m-5"> <div class="flex items-center justify-between border-b p-6"> <h3> Headline </h3> <button data-modal-close aria-label="Close" type="button" class="text-gray-700 hover:text-black focus:text-black transition ease-in-out duration-150 ml-auto"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg> <span class="sr-only">Close</span> </button> </div> <div class="relative overflow-x-hidden overflow-y-auto h-full flex-grow p-5"> <p class="mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. </p> <div class="mb-4"> <label for="example" class="block mb-2">Autofocus when opening modal</label> <input type="text" name="example" id="example" placeholder="Example" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline" data-modal-input-focus autofocus> </div> <div class="text-right"> <button data-modal-close type="button" class="underline"> Close Modal </button> or [esc] key </div> </div> </div> </div> </div>
4. Create a fullscreen modal window.
<a href="#modal-full-screen" aria-expanded="false"> Open modal full screen </a>
<div id="modal-full-screen" data-modal-target class="hidden"> <div class="flex items-center justify-center fixed inset-0 z-50"> <div data-modal-close data-modal-overlay tabindex="-1" data-class-in="opacity-50" data-class-out="opacity-0" class="opacity-0 fixed inset-0 w-full z-40 transition-opacity duration-300 bg-black select-none"></div> <div data-modal-wrapper data-class-in="opacity-100 translate-y-0" data-class-out="opacity-0 translate-y-5" class="opacity-0 translate-y-5 w-full h-full z-50 overflow-auto scrolling-touch transition-all duration-300 bg-white flex flex-col transform"> <div class="flex items-center justify-between p-6"> <button data-modal-close aria-label="Close" type="button" class="text-gray-700 hover:text-black focus:text-black transition ease-in-out duration-150 ml-auto"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> <span class="sr-only">Close</span> </button> </div> <div class="relative overflow-x-hidden overflow-y-auto h-full flex flex-col justify-center flex-grow p-5 w-full max-w-xl mx-auto"> <p class="mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. </p> <div class="text-right"> <button data-modal-close type="button" class="underline"> Close Modal </button> or [esc] key </div> </div> </div> </div> </div>
5. Create a drawer-style modal window that slides from the right side of the screen.
<button data-modal-trigger aria-controls="drawer-name" aria-expanded="false" type="button"> Open modal drawer-style right side </button>
<div id="drawer-name" data-modal-target class="hidden absolute inset-0 overflow-hidden"> <div data-modal-close data-modal-overlay tabindex="-1" data-class-in="opacity-50" data-class-out="opacity-0" class="fixed inset-0 w-full z-40 opacity-0 transition-opacity duration-500 bg-black select-none"></div> <div data-modal-wrapper data-class-in="translate-x-0" data-class-out="translate-x-full" class="fixed top-0 right-0 bottom-0 w-10/12 h-full max-w-md z-50 overflow-auto scrolling-touch transition-transform duration-500 bg-white flex flex-col shadow-xl transform translate-x-full"> <div class="flex items-center justify-between border-b p-6"> <h3> Headline </h3> <button data-modal-close class="text-gray-700 hover:text-black focus:text-black transition ease-in-out duration-150 ml-auto" aria-label="Close"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> <span class="sr-only">Close</span> </button> </div> <div class="relative h-full flex-grow overflow-x-hidden overflow-y-auto p-6"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. </p> <div class="text-right"> <button data-modal-close type="button" class="underline"> Close Drawer </button> or [esc] key </div> </div> </div> </div>
6. Create a drawer-style modal window that slides from the left side of the screen.
<button data-modal-trigger aria-controls="drawer-name-left" aria-expanded="false" type="button"> Open modal drawer-style left side </button>
<div id="drawer-name-left" data-modal-target class="hidden absolute inset-0 overflow-hidden"> <div data-modal-close data-modal-overlay tabindex="-1" data-class-in="opacity-50" data-class-out="opacity-0" class="fixed inset-0 w-full z-40 opacity-0 transition-opacity duration-500 bg-black select-none"></div> <div data-modal-wrapper data-class-in="translate-x-0" data-class-out="-translate-x-full" class="fixed top-0 left-0 bottom-0 w-10/12 h-full max-w-md z-50 overflow-auto scrolling-touch transition-transform duration-500 bg-white flex flex-col shadow-xl transform -translate-x-full"> <div class="flex items-center justify-between border-b p-6"> <h3> Headline </h3> <button data-modal-close class="text-gray-700 hover:text-black focus:text-black transition ease-in-out duration-150 ml-auto" aria-label="Close"> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> <span class="sr-only">Close</span> </button> </div> <div class="relative h-full flex-grow overflow-x-hidden overflow-y-auto p-6"> <p class="mb-4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in aliquid nulla, sed veritatis, officiis ea aut natus quas voluptates perferendis ratione modi ab qui omnis cum labore alias eos. </p> <div class="mb-4"> <label for="example" class="block mb-2">Autofocus when opening modal</label> <input type="text" name="example" id="example" placeholder="Example" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline" data-modal-input-focus autofocus> </div> <div class="text-right"> <button data-modal-close type="button" class="underline"> Close Drawer </button> or [esc] key </div> </div> </div> </div>
7. Open & close the modal window programmatically.
// open modal.openModal('modal-name'); // close modal.closeModal('modal-name');