ldCover is available for downloading in its Github Repo. Or, you can get it directly with following links:
You could also use ldCover directly via CDN like jsDelivr:
Or, via npm:
First include required JS and CSS files ( could be found in ldCover's Github Repo ). Then, prepare a modal root node, and use it to create an ldCover object:
ldCover is designed with following features:
ldCover is implemented with Vanilla JS. There is no single external dependency which makes it easy to maintain and as light as possible - file size only about 6KB in total.
ldCover is independent to any JS libraries or frameworks. Thus, it's quite easy to integrate it into your project regardless which framework you use. It will work on React, Vue, Angular or any JS frameworks.
With promise, you can toggle modals in asynchronous way, e.g., wait for user event, polling for server response... Everything made simple with promise.
ldCover automatically manages z-index of your modal which makes it easy and useful working with complicated workflows that might involves multiple dialogs.
While ldCover is framework agnostic, we will use Bootstrap 4 in following examples. Bootstrap is not necessary so you can use your favorite framework.
ldCover uses 3-Level DOM structure to define a dialog, with classNames "ldcv", "base", and "inner":
Roles of each node are:
Here is a simple example of dialog with only one line of text:
You can customize your own dialog by styling the
inner element. In following examples, we will use bootstrap 4's card component to style our dialog:
As shown in previous demo, you can call
toggle() to toggle on/off the target dialog. Additionally, you can set the
data-ldcv-set attribute of any element inside the root element to transfer that element into a close button:
data-ldcv-set could actually be used to determine how users respond to your dialog. To get users response, toggle dialog with
get() instead of
get() returns a Promise which is resolved with the
data-ldcv-set attribute for the clicked element:
Or, if you prefer to handle events by yourself, you can invoke
set() to manually set the value for resolving Promise:
In following section we'll demonstrate how you can change the ldCover's behavior or even extend it.
You can manually adjust size of your dialog by changing style of
.inner element, but we also provide 3 CSS class for quickly setting dialog's size:
ldCover is shipped with some prebuilt effects on transition. To use them, include an additional CSS file
ldcv.effects.css and add the class for desired effects in the root element. Following are classes for these effects, you can preview the effects by clicking corresponding buttons:
Put "ldcv-scale" in the root element's class will do the trick, for example:
Put "ldcv-zoom" in the root element's class will do the trick, for example:
Put "ldcv-vortex" in the root element's class will do the trick, for example:
Put "ldcv-slide-rtl" in the root element's class will do the trick, for example:
Put "ldcv-slide-ltr" in the root element's class will do the trick, for example:
Put "ldcv-slide-ttb" in the root element's class will do the trick, for example:
Put "ldcv-slide-btt" in the root element's class will do the trick, for example:
Put "ldcv-flip-h-left" in the root element's class will do the trick, for example:
Put "ldcv-flip-h-right" in the root element's class will do the trick, for example:
Put "ldcv-flip-v-top" in the root element's class will do the trick, for example:
Put "ldcv-fade" in the root element's class will do the trick, for example:
If you don't like the built-in effects, you can also write your own class or use external libraries. To make your own effect, simply define your own class with two states ( with / without
active class ), and styling the
If you want to use CSS Animation instead of CSS Transition to animate your dialog, we also provide the
animation attribute that helps you to toggle desired classes when dialog changes it's state; here we use transition.css as an example:
CSS Animation grants you more powerful and subtle controls to your dialog animation, and transition.css provides about 40 different prebuilt animations for you to choose. If you are interested in using transition.css, follow this link directly to get more detail about how to use it.
Except the configurations described above, you can also alter ldCover's behavior by following configurations:
.inner node when toggling on, and removed when toggling off.
a ldCover instance exposes following API functions:
data-ldcv-set on elements to automatically set value when elements are clicked.
ldCover is compatible with all modern browsers. However, it uses two modern web features that fails in IE older than version 11:
Fortunately you can easily find polyfills for both classList and Promise to support these browsers.
ldCover is released under MIT License. License file can be found under ldCover's GitHub repository.
Any questions or suggestion? Feel free to leave comment here. :)
It's a Promise-based Dialog.
Say you have a chain of modals to show. You can write like this:
Promise.reject is what you need. Handle your own returned rejection does all the trick.
ldCover auto z-indexing your dialogs. Simiply toggle your dialogs in desired order will do:
This dialog popups over the last one you just clicked.
Just another dialog over all of them.
You might have signed up with another email / password before. please try:
Download after paying or upgrading to Pro with your loading.io account.
You are downloading free license item. Sign in to proceed.
Save your works, design and share with others by logging in loading.io.
Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929
Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.