Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
modalite
Advanced tools
Readme
Is the simplest JavaScript modal library. No jQuery. Just a few HTML attributes.
Can be seen here or in this fiddle.
npm install modalite
or
git clone https://github.com/hdodov/modalite/
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:
<script type="text/javascript" src="path/to/modalite.min.js"></script>
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:
<link rel="stylesheet" type="text/css" href="path/to/modalite.min.css">
Then, to create a modal, use this template:
<div id="my-modal-id" class="modalite-modal" data-modalite-modal>
<div class="modalite-container">
<div class="modalite-close" data-modalite-close></div>
<div class="modalite-content">
<h1>My content here!</h1>
</div>
</div>
</div>
At this point, your modal will be sitting silently and won't be visible. Now, you need to add a trigger:
<p data-modalite-open="my-modal-id">Click me for a juicy modal!</p>
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
.
To create a modal, you simply need to:
data-modalite-modal
attribute and give it an id
. Style it so that it's hidden. You can use the visibility
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 the is-visible
class. This should define its visible behaviour.data-modalite-open
attribute and set its value to equal the previously created modal's id
. When clicked, this will add the is-visible
class to the targeted modal.data-modalite-close
attribute.For example, this would be a fully functional modal:
<div id="my-modal" data-modalite-modal>
<p data-modalite-close>Close me!</p>
</div>
<p data-modalite-open="my-modal">Open the modal!</p>
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.
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.
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:
<iframe>
, an XHR to the remote URL will be initiated. The contents of the element will be replaced with the XHR response text.<iframe>
, its src
attribute will simply be set to the remote URL specified in data-modalite-remote
.Note: Remote resources are loaded only once! If you close the modal and open it again, nothing would happen.
It's the same thing as before, but with two additional steps:
data-modalite-has-remote
attribute to your modal.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:
<div id="my-modal" data-modalite-modal data-modalite-has-remote>
<div data-modalite-remote="path/to/my/file.txt">
Get ready for the content!!!
</div>
</div>
<p data-modalite-open="my-modal">Open the modal!</p>
If you want several different remotes sharing a single modal container, change the data-modalite-open
attribute:
<p data-modalite-open="my-remote-modal@path/to/my/remote.txt">My remote modal!</p>
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 ,
:
<p data-modalite-open="my-remote-modal@my/file1.txt,my/file2.txt">My remote modal!</p>
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:
<p data-modalite-open="legal-modal@legalstuff/privacy-policy.html">Privacy Policy</p>
<p data-modalite-open="legal-modal@legalstuff/terms-and-conditions.html">Terms & Conditions</p>
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!
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 {object} modal The DOM modal element.
*/
Modalite.open(modal);
/**
* Removes the visibility class from a modal.
* @param {object} modal The DOM modal element.
*/
Modalite.close(modal);
/**
* Removes the visibility class from a modal.
* @param {object} modal The DOM modal element.
* @param {array} remotes Remote URLs.
*/
Modalite.setRemotes(modal, remotes);
Here are the CSS classes provided by Modailte that you can use to style your modals.
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 time is-loading
is removed.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 their load
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.modalite
. Remote URLs can be dynamically changed. Improved CSS for greater browser support.openModal()
and closeModal()
functions to control modals via code.Thankyouverymuch.
FAQs
The most simple and flexible JavaScript modal library.
The npm package modalite receives a total of 56 weekly downloads. As such, modalite popularity was classified as not popular.
We found that modalite demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.