Minimal Movable Modal Window JavaScript Library

Category: Javascript , Modal & Popup | July 8, 2017
Author:Razip
Views Total:1,333 views
Official Page:Go to website
Last Update:July 8, 2017
License:MIT

Preview:

Minimal Movable Modal Window JavaScript Library

Description:

This is a lightweight native JavaScript plugin for creating movable modal windows with countdown and callback support.

How to use it:

Link to the stylesheet ‘modalWindow.css’ and JavaScript ‘modalWindow.js’:

<link rel="stylesheet" href="modalWindow.css">
<script src="modalWindow.js"></script>

Create a basic modal window.

new ModalWindow('Basic Modal').show();

Create a countdown modal window:

var window = new ModalWindow('The countdown will start in one second.');
window.lock();
var i = 10;
var interval = setInterval(function () {
    if (i > 0) {
        window.setContent(i + ' second(s).');
        i--;
    } else {
        window.setContent("Time's up. You can close this window now.");
        window.unlock();
        clearInterval(interval);
    }
}, 1000);

Show an alert will be shown after closing the modal window:

new ModalWindow('An alert will be shown after closing this window.').onClose(function() {
    alert('onClose');
});

Create a modal window which can be moved via drag and drop:

new ModalWindow('Drag and drop this window.', true);

 

You Might Be Interested In:


Leave a Reply