Modal dialog
Window modal dialogs for browser (eg. with simq). Depends on jQuery, instance of EventEmitter, uses q promise library.
Abandoned
Unfortunately I don't have any more time to maintain this repository :-(
Installation
$ npm install modal-dialog
Usage
var Dialog = require('modal-dialog');
var d = new Dialog(window.jQuery);
d.title = 'Title of my window';
d.content = 'Lorem lipsum dolor sit amet...';
d.info = 'Info in footer';
d.addButton('OK', function() {
alert('OK button was clicked');
d.hide();
});
d.show();
If you want to set some element directly into header or footer, you can set these variables. Title
and info
variables
are just shortcuts for setting texts.
d.header = $('<div>my custom header</div>');
d.footer = $('<div>my custom footer</div>');
Changing data of created dialog
There are three methods for changing data. Unfortunately you can not change everything (just title, content and info).
d.changeTitle('new title');
d.changeContent('new content');
d.changeInfo('new info');
Styling
This modal dialog comes with one simple style which is sincerely horrible, so I recommend to use your own style. You just have to disable the default one.
Dialog.styles = false;
Now you can write your own styles in your css files. Modal dialog has got some classes for you. Names of these classes can
be also changed in variable classes
. Here are the default ones.
Dialog.classes = {
container: 'modal_dialog',
title: 'title',
header: 'header',
content: 'content',
footer: 'footer',
info: 'info',
buttons: 'buttons',
button: 'button',
};
Options
Settings described above were default settings, but you can set these options for each dialog separately.
d.show({
styles: false
});
List of options
- width
- maxHeight
- duration (speed of animation in jquery)
- zIndex
- styles (disable or allow default styles)
- classes (override default classes names)
- overlay (list of options for overlay package)
Confirmation dialog
There is prepared also simple confirmation dialog with two buttons (OK
and Cancel
).
var Confirm = require('modal-dialog/ConfirmDialog');
var c = new Confirm(window.jQuery, 'Are you really want to continue?');
c.on('true', function() {
alert('You clicked on the OK button');
});
c.on('false', function() {
alert('You clicked on the Cancel button');
});
Here is how to set own captions for these two buttons.
var c = new Confirm(window.jQuery, 'Some question', 'Yes', 'No');
Events
beforeShow
(dialog): Called before dialog is openedafterShow
(dialog): Called after dialog is opened (after all animations)beforeHide
(dialog): Called before dialog is closedafterHide
(dialog): Called after dialog is closed (after all animations)true
(only confirmations): Called when true button is clickedfalse
(only confirmations): Called when false button is clicked
Example:
d.on('afterShow', function(dialog) {
d === dialog; //true
console.log('Window is open');
});
Tests
$ npm test
Changelog
-
1.6.3
- Moved to Carrooi organization
- Abandon package
-
1.6.2
- Little optimization
-
1.6.1
- Bug with changing elements
-
1.6.0
- Optimizations
- Added changeTitle, changeContent and changeInfo methods
- Optimized tests
-
1.5.0
- onTrue and onFalse in confirmations replaced with eventEmitter events
- overlay did not hide in some situations
-
1.4.0
- jQuery must be passed in constructor
-
1.3.3 - 1.3.4
- Some optimizations
- Updated tests
-
1.3.2
- Uses content-ready module
- Added many other tests
-
1.3.1
- Added tests
-
1.3.0
- Instance of EventEmitter
- Added some events
-
1.2.2 - 1.2.4
- Showing dialog in right position after all images all loaded
-
1.2.1
- Bug with custom styles
-
1.2.0
- Added
isOpen
method
- Added
-
1.1.1
- Some bugs
-
1.1.0
- Added confirm dialog
-
1.0.0
- Initial version