ldCover

Dialog Made Easy

ldCover is a JavaScript library that helps you control the state of your dialog / popup with Promise.

Download

ldCover is available for downloading in its Github Repo. Or, you can get it directly with following links:

ldcv.zip

You could also use ldCover directly via CDN like jsDelivr:

Or, via npm:

npm i ldCover

Basic Usage

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:

<link rel="stylesheet" type="text/css" href="ldcv.css"/> <script src="ldcv.js"></script>  <div id="my-modal" class="ldcv">CLICK TO DISMISS</div>  <div onclick="ldcv.toggle()">Try Me</div>

/* 3. create ldCover object with the modal node */
var ldcv = new ldCover({ root: "#my-modal" }); 

Try Me

ldCover is designed with following features:

Vanilla JS

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.

Framework Agnostic

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.

Promise Based

With promise, you can toggle modals in asynchronous way, e.g., wait for user event, polling for server response... Everything made simple with promise.

Nesting Supported

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.

Basic Dialog

ldCover uses 3-Level DOM structure to define a dialog, with classNames "ldcv", "base", and "inner":

<div class="ldcv">      <!-- root of the dialog -->
  <div class="base">    <!-- optional. control the position of dialog -->
    <div class="inner"> <!-- dialog body. transition happens here -->
      your content here...
    </div>
  </div>
</div>

Roles of each node are:

ldcv - root element, passed to ldCover constructor. will be full screen in size.
base - wrapping element for dialog that controls its position. optional.
inner - dialog body.

Here is a simple example of dialog with only one line of text:

<div class="ldcv">
  <div class="base">
    <div class="inner">
      Hello World!
    </div>
  </div>
</div>
<div onclick="ldcv.toggle()">Show Dialog</div>

var ldcv = new ldCover({root: ".ldcv"});
ldcv.toggle();

Hello World!

Show Dialog

Basic Styling

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:

<div class="ldcv">
  <div class="base">
    <div class="inner card">
      <div class="card-body">
        Hello World!
      </div>
    </div>
  </div>
</div>
<div onclick="ldcv.toggle()">Show Dialog</div>

var ldcv = new ldCover({root: ".ldcv"});

Hello World!

Show Dialog

Toggle / Dismiss

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:

<div class="ldcv">
  <div class="base">
    <div class="inner card">
      <div class="card-body">
        Hello World!
        <hr>
        <div class="btn btn-primary" data-ldcv-set=""> Close </div>
      </div>
    </div>
  </div>
</div>
<div onclick="ldcv.toggle()">Show Dialog</div>

var ldcv = new ldCover({root: ".ldcv"});

Hello World!

Show Dialog

User Response

Value of 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 toggle(); get() returns a Promise which is resolved with the data-ldcv-set attribute for the clicked element:

<div class="ldcv">
  <div class="base">
    <div class="inner card">
      <div class="card-body">
        <h3>What's Your Choice?</h3>
        <hr>
        <div class="btn btn-primary mr-2" data-ldcv-set="Yes"> Yes </div>
        <div class="btn btn-primary" data-ldcv-set="No"> No </div>
      </div>
    </div>
  </div>
</div>
<div onclick="prompt()">Show Dialog</div>

var ldcv = new ldCover({root: ".ldcv"});
function prompt() {
  ldcv.get().then(function(ret) { alert("User chooses: " + ret); });
}

What's Your Choice?

Yes

Show Dialog

Or, if you prefer to handle events by yourself, you can invoke set() to manually set the value for resolving Promise:

<div class="ldcv">
  <div class="base">
    <div class="inner card">
      <div class="card-body">
        <h3>Click When You Are Ready</h3>
        <hr>
        <div class="btn btn-primary" onclick="finish()"> I'm Ready </div>
      </div>
    </div>
  </div>
</div>
<div onclick="prompt()">Show Dialog</div>

var ldcv = new ldCover({root: ".ldcv"});
function prompt() {
  var start = Date.now();
  ldcv.get().then(function(ret) {
    alert("User wait " + (+ret - Date.now()) + " ms to respond.");
  });
}
function finish() {
  ldcv.set(Date.now());
}

Click When You Are Ready

I'm Ready

Show Dialog

Customization

In following section we'll demonstrate how you can change the ldCover's behavior or even extend it.

Dimension

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:

md: 720px x 500px
lg: 960px x 700px
full: fullscreen

<div class="ldcv"> 
  <div class="base">
    <!-- set width and height manually -->
    <div class="inner" style="width:600px;height:200px">
      ...
    </div>
  </div>
</div>

<!-- use predefined class -->
<div class="ldcv full"> 
  <div class="base">
    <div class="inner"> ... </div>
  </div>
</div>

<div class="ldcv ldcv-fade">
  <div class="base">
    <div class="inner"> ... </div>
  </div>
</div>

Got it.

Custom Transition

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 inner class:

.ldcv-my-effect > .base > .inner {
  transform: translate(100%,0) scale(10);
  opacity: 0;
}
.ldcv-my-effect.active > .base > .inner {
  transform: translate(0,0) scale(0);
  opacity: 1;
}

Show Me

Hello World!

Custom Animation

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:

var ldcv = new ldCover({
  root: "#my-ldcv",
  animation: "ld ld-bounce-in"
});

Custom Animation Rocks!

transition.css is available here. Go visit for more information about how to use it.

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.

Configurations

Except the configurations described above, you can also alter ldCover's behavior by following configurations:

root: root element for your modal.
type: additional class to add. default: ''. Space seprated.
transform-fix: true/false. default: false.
add a 'shown' class after ldCover is shown, which removes transform from .inner block. useful when content is blurred due to transform, but might lead to glitches when doing transition. use it carefully.
delay: milliseconds. default 300.
should be aligned with transition duration. use to control 'shown' and 'running' classes.
escape: should pressing escape key close the dialog. boolean, default true.
autoZ: update root's z-index automatically. default true.
baseZ: the minimal z-index of root. default 3000.
with autoZ, ldCover keeps track of all cover' z-index and always use larger z-index for newly toggled covers. baseZ is then used as a base value for all auto-z covers.
animation: optional space separated class list.
will be added to .inner node when toggling on, and removed when toggling off.
for adding customized animation from libraries like transition.css or animate.css.

APIs

a ldCover instance exposes following API functions:

toggle(state): toggle on/off ldCover.
get(): toggle on ldCover and return a promise
Returned promise will only be resolved when ldCover.set is called, along with the parameters passed into set.
set(value, hide): set value, which resolve promises from get.
- hide ldCover if hide = true.
- value is passed to the promise from get.
- use data-ldcv-set on elements to automatically set value when elements are clicked.
on(event, cb): listen to certain event. evnets:
- toggle.on: when ldCover is toggled on.
- toggle.off: when ldCover is toggled off.
isOn(): check if this modal is active ( opened ). return true or false.

Browser Compatibility

ldCover is compatible with all modern browsers. However, it uses two modern web features that fails in IE older than version 11:

classList ( not supported by IE<=9 )
Promise ( not supported by IE<=11, Opera Mini, IE Mobile and some older mobile device)

Fortunately you can easily find polyfills for both classList and Promise to support these browsers.

License

ldCover is released under MIT License. License file can be found under ldCover's GitHub repository.

Comments

Any questions or suggestion? Feel free to leave comment here. :)

Dialog Made Easy

Download

Basic Usage

Vanilla JS

Framework Agnostic

Promise Based

Nesting Supported

Basic Dialog

Basic Styling

Toggle / Dismiss

User Response

What's Your Choice?

Click When You Are Ready

Customization

Dimension

Effects on Transition

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Effect Preview

Custom Transition

Hello World!

Custom Animation

Custom Animation Rocks!

Configurations

APIs

Browser Compatibility

License

Comments

Hi There!

What's Promise-based?

Chain Breaking

Auto Nesting

Here We Go.

Here We Go.

Login Failed.

Pro License Download

Download,For Free.

Loading.io

loading.io

Download,
For Free.