A very light vanilla JavaScript plugin for creating modals. You only write the HTML and the rest will be taken care of by the plugin.
To try out Sassy Modal clone this repo and run the following commands.
First install npm packages
npm install
Then run
npm start
# output
> sassymodal@1.0.0 start
> parcel index.html
Server running at http://localhost:1234
Built in 1.60s
Visit http://localhost:1234
to see the result. Your port may not be 1234
!
First you need to get the plugin file SassyModal.js
. Copy it to your JS
directory. You can create a directory called plugins/
in your JS directory
and put the SassyModal.js
there.
In your index.js file you want to instantiate the modal object as shown in example below:
import SassyModal from './js/plugins/SassyModal';
const modal = new SassyModal({
blur: true,
centered: true,
animation: 'fade-in',
showModalCSS: 'show-modal'
});
The SassyModal
object takes an object as an argument which allow you to
customize the modal a little. See the object below to see all the attributes you
can customize.
const modal = new SassyModal({
blur: true, // Backdrop blur
centered: true, // Modal position centered
animation: 'fade-in', // Animations: fade-in/fade-out
showModalCSS: 'show-modal', // CSS class that shows modal
dataAttributes: {
trigger: 'data-modal-trigger', // Data attribute for triggers
closer: 'data-modal-close', // Data attribute for close buttons
id: 'data-modal-id' // Data attribute for modal IDs
}
});
The HTML for the modal could look like following:
<!-- Modal Triggers -->
<div class="modal__triggers">
<a class="btn btn--default btn--round" href="#" data-modal-trigger="modal-one">Modal One</a>
</div>
<!-- Modal One -->
<div class="modal__container" data-modal-id="modal-one">
<div class="modal__backdrop"></div>
<div class="modal__content">
<div class="modal__head">
<h3 class="heading-light heading-3">Modal One</h3>
</div>
<div class="modal__body">
<h3 class="heading-light heading-3">This is the modal body!</h3>
</div>
<div class="modal__foot">
<a class="btn btn--default" href="#" data-modal-close="modal-one">Close</a>
</div>
</div>
</div>
Sassy Modal also provides custom events like Bootstrap. There are four custom
events you can use the before_open
, after_open
, before_close
and
after_close
. Those events can be utilized to update the content of the modal
after or before it's opened or closed. See the example below on how to use them!
Let's suppose we want to change the title of the modal after it's opened.
const modalOne = document.querySelector('[data-modal-id="modal-one"]');
modalOne.addEventListener('after_open', (event) => {
const targetModal = event.detail;
targetModal.querySelector('.modal__content h3').innerText = "Modal One - After Open Event";
});
The other events can be used similarly.
obj.addEventListener('after_close', function(){...});
obj.addEventListener('before_open', function(){...});
For the animations you've to either use the animation from Sassy Modal or you
write your own CSS animations see the default theme file inside
src/sass/themes/
directory. For the styles you can basically copy the
default theme and modify it to suit your needs. However it's not necessary
you're totally free to write your own HTML and CSS.