Author: | AddMoreScripts |
---|---|
Views Total: | 67 views |
Official Page: | Go to website |
Last Update: | September 27, 2023 |
License: | MIT |
Preview:

Description:
hystModal is a simple, lightweight, flexible, and accessible modal window plugin written in pure JavaScript.
More Features:
- WAI-ARIA compliant.
- Easy to style using CSS.
- Supports most modern browsers.
- Loads modal content from inline elements.
- Smooth transition effects.
How to use it:
1. Insert both ihmodals.css and JavaScript ihmodals.js into the document.
<link href="dist/ihmodals.css" rel="stylesheet"> <script src="dist/ihmodals.min.js"></script>
2. Create the modal window in the document.
<div class="hystmodal hystmodal--simple" id="modalSimple" aria-hidden="true"> <div class="hystmodal__wrap"> <div class="hystmodal__window" role="dialog" aria-modal="true"> <button class="hystmodal__close" data-hystclose>Close</button> <div class="hystmodal__styled"> Modal Body Here </div> </div> </div> </div>
3. Create a trigger element to toggle the modal.
<button class="button" data-hystmodal="#modalSimple">Simple Modal</button>
4. Initialize the modal library and done.
const myModal = new HystModal.modal({ linkAttributeName: 'data-hystmodal' // more options here });
5. Apply your own CSS styles to the modal.
.hystmodal--simple .hystmodal__window{ position: relative; overflow: visible; border-radius: 4px; padding: 30px 30px; } .hystmodal--simple .hystmodal__close{ position: absolute; z-index: 10; top:0; right: -40px; display: block; width: 30px; height: 30px; background-color: transparent; background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E"); background-size: 100% 100%; border: none; font-size: 0; cursor: pointer; } *:focus { outline: 2px dotted #afb3b9; outline-offset:2px; } @media all and (max-width:767px){ .hystmodal--simple .hystmodal__close{ top:10px; right: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E"); } .hystmodal--simple .hystmodal__window{ margin: 0; } }
6. All possible options with default values.
const myModal = new HystModal.modal({ // enable/disable body scroll when the modal is activated backscroll: : true, // data attribute of trigger element linkAttributeName: : "", // close the modal by clicking on the overlay closeOnOverlay: true, // close the modal by pressing on the ESC key closeOnEsc: true, // close the modal by clicking on the close button closeOnButton: true, // close the modal after the CSS transition is finished waitTransitions: false, // focus on the active elements after the modal opened catchFocus: true, // contains a css selector that adds an margin-right equal to the width of the scroll bar when opening a modal window // useful for fixed elements on a page to avoid shifting them when opening a window // works only if the property backscroll:true fixedSelectors: "*[data-hystfixed]", // callback functions beforeOpen: function () { }, afterClose: function () { } });
7. API methods.
// open a modal window myModal.open(selector); // close the modal window myModal.close();
Changelog:
09/27/2023
- Bugfix
05/05/20223
- Bugfix
v1.0.0beta (02/11/2023)
- Bugfix
v0.5 (03/30/2022)
- Bugfix
10/30/2020
- Add “fixedSelectors” propperty
- Fix Shift+Tab focus bug
08/30/2020
- v0.2.0