Modalite
Is the simplest JavaScript modal library. No jQuery. Just a few HTML attributes.
Demo
Can be seen here or in this fiddle.
Installation
npm install modalite
or
git clone https://github.com/hdodov/modalite/
How to use?
You could use the Modalite modal template and CSS, it takes responsiveness into consideration. If you're not interested in that, you can create your modal from scratch too.
Whatever you do, start by including the Modalite JavaScript in your page:
Building a modal with the Modalite template
The CSS provided by the library styles the modal so that it's visible only when it has the is-visible
class. It also styles the close button, container and content area. For modals with the modalite-remote
class, an overlay and loading spinner are also added. To have all of that, you only need:
Then, to create a modal, use this template:
My content here!
At this point, your modal will be sitting silently and won't be visible. Now, you need to add a trigger:
Click me for a juicy modal!
Note: If you have a remote modal, it won't have the loading spinner and overlay unless you add the modalite-remote
class to the element with the data-modalite-modal
attribute. If you have an <iframe>
remote and you want it to take up the whole modal window, add the modalite-iframe
class in addition to modalite-remote
.
Building a modal with your own CSS
To create a modal, you simply need to:
- Add an element with the
data-modalite-modal
attribute and give it anid
. Style it so that it's hidden. You can use thevisibility
CSS property. It's good for the job, because it's affected by transitions and makes animations a whole lot easier. Add another rule-set for when the element has theis-visible
class. This should define its visible behaviour. - Add an element with the
data-modalite-open
attribute and set its value to equal the previously created modal'sid
. When clicked, this will add theis-visible
class to the targeted modal. - Optionally, you can add a close button for the modal. By default, it will be closed when its background is clicked, as this is expected modal behaviour. To add a close functionality, simply add any element inside the modal and give it the
data-modalite-close
attribute.
For example, this would be a fully functional modal:
Close me! Open the modal!
You just need to add some CSS and make the modal invisible by default and then add some styles that show it when it has the is-visible
class.
Remote modals
They rock! Have a 5MB Privacy Policy? Remote modals are the way. No need to demolish your page load times with something that nobody is going to read. Ever. Simply load all of that text when the modal is opened. This way, if your visitor isn't interested in your Privacy Policy, he wouldn't have to wait for it to load in those crucial first seconds of his visit.
How do remote modals work?
When the modal is opened, its contents are searched for elements with the data-modalite-remote
attribute. It should hold the URL to the desired resource. However, DOM operations can be costly, especially for large elements. Suppose you decided to actually splatter that Privacy Policy directly in your modal. It could have thousands of elements... searching for an attribute that might not even exist will be a huge overhead.
That's why the remote modal must have the data-modalite-has-remote
attribute. Without it, you'll just be having a regular modal. No DOM searches will be performed whatsoever.
When an element with data-modalite-remote
is found, two things can happen:
- If the element is not an
<iframe>
, an XHR to the remote URL will be initiated. The contents of the element will be replaced with the XHR response text. - If the element is an
<iframe>
, itssrc
attribute will simply be set to the remote URL specified indata-modalite-remote
.
Note: Remote resources are loaded only once! If you close the modal and open it again, nothing would happen.
How to create a remote modal?
It's the same thing as before, but with two additional steps:
- Add the
data-modalite-has-remote
attribute to your modal. - Add the
data-modalite-remote
attribute to any element inside the modal. Its value should be set to the URL of the remote resource.
This would be a fully functioning remote modal:
Get ready for the content!!! Open the modal!
If you want several different remotes sharing a single modal container, change the data-modalite-open
attribute:
My remote modal!
Whenever this element is clicked, a modal with ID my-remote-modal
will be opened. However, if it has an element with data-modalite-remote
inside, that attribute's value will be set to whatever is after the @
symbol.
If you have multiple data-modalite-remote
elements, you have to separate the remote URLs with ,
:
My remote modal!
The first data-modalite-remote
will be set to my/file1.txt
, the second will be my/file2.txt
. If there are more remotes than the specified URLs, they will be set to ""
and their previously loaded content will be removed.
For example, if you want your Privacy Policy and Terms & Conditions to share a modal container, you need:
Privacy PolicyTerms & Conditions
Note: You can load any file type, as long as it's text. If you're loading HTML, be wary... it may contain harmful <script>
tags that could inject JavaScript and compromise the security of your site!
API
Modals are opened and closed just by adding/removing their visibility class. However, if the modal has to load any remote resources, that won't be enough.
/** * Adds the visibility class to a modal and loads its remotes. * @param */Modalite; /** * Removes the visibility class from a modal. * @param */Modalite; /** * Removes the visibility class from a modal. * @param * @param */Modalite;
Styling guide
Here are the CSS classes provided by Modailte that you can use to style your modals.
Modal classes
Added to the element with attribute data-modalite-modal
.
is-visible
: Bread and butter. Added when the modal is opened and removed when it's closed.is-loading
: Added when the modal starts loading remote resources. Removed when all remote resources in the modal have finished loading or failed to do so.is-loaded
: Added at the same timeis-loading
is removed.
Remote container classes
Added to all elements with attribute data-modalite-remote
.
is-remote-loading
: Added when the remote starts loading. Removed when the remote has loaded or failed to do so.is-remote-success
: Added when the remote has successfully loaded. Iframe remotes get this class when theirload
event triggers.is-remote-error
: Added if the XHR response status code isn't in the 200-299 range. Iframe remotes don't get this class as there is no way to check whether they have successfully loaded.
Changelog
- 2.0.0 - Set class and attributes prefix to
modalite
. Remote URLs can be dynamically changed. Improved CSS for greater browser support. - 1.2.0 - Exposed the
openModal()
andcloseModal()
functions to control modals via code. - 1.1.0 - Added support for modals with external resources.
- 1.0.0 - Initial release.
Support
Thankyouverymuch.