https://github.com/arshtepe/modaljs
It is small cross-browser script for modal windows or popup windows.
https://github.com/arshtepe/modaljs
Last synced: 2 months ago
JSON representation
It is small cross-browser script for modal windows or popup windows.
- Host: GitHub
- URL: https://github.com/arshtepe/modaljs
- Owner: arshtepe
- License: mit
- Created: 2014-01-23T23:59:44.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-06-03T21:06:20.000Z (almost 9 years ago)
- Last Synced: 2025-03-10T21:08:43.856Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
##NEW project version
https://github.com/cyberua/multiPopupJS
##Demo
* http://jsfiddle.net/dyL78o6k/5/ - demo
* http://jsfiddle.net/dyL78o6k/6/ - animation change demo
* http://jsfiddle.net/dyL78o6k/7/- animation change demo
##Installation
```HTML
```
##Features
* Cross browser compatibility
* Without additional libraries
* Easy usage
* Css3 animation
* Easy settings animation
## Browsers Support
* Chrome +
* Firefox +
* Opera +
* Internet Explorer 9 +
```javascript
var modal = new ModalJS({
window: win,// Link on HTMLElement
opt_closeButtonCls: "close-button",//Close button element class
opt_isOverlayClickHide: true,// if true when click on overlay, window will close
useAnimate: false// if false animation does not use (default true)
});
modal.show(); //show window
modal.hide(); // hide window
// Events: show, showed, hide
modal.on( "showed",function () { // bind on modal events
// this == modal
} ) ;
modal.off( "showed", /*opt_Handler*/ )//remove event handler
modal.setWindow( /*modal window HTMLEelement*/ );
modal.destroy( /*opt_removeWindow*/ )// destroyed all handlers and links on HTML elements, if opt_removeWindow = true, removed HTMLElemenet window.
modal.destroyWindow (/*opt_removeWindow*/);// removed all links on window element, if opt_removeWindow = true, removed HTMLElemenet window.
modal.setStartAnimationPosition = function() { // Set start position window before start animation, default at the top at the center outside screen
this.window.style.top = -this.window.clientHeight + "px"; //default value
};
// Set end position for window ( place in what window will move ), default screen center
modal.setEndAnimationPostition = function ( ) { //default function
var win = this.window,
top = ( window.innerHeight - win.offsetHeight ) / 2,
left = ( window.innerWidth - win.offsetWidth ) / 2;
win.style.top = top + "px";
win.style.left = left + "px";
};
```
##Animation change example
http://jsfiddle.net/dyL78o6k/
```javascript
modal.setStartAnimationPosition = function() {
this.window.style.top = 0 + "px";
};
modal.setEndAnimationPostition = function ( ) {
var win = this.window,
top = window.innerHeight - win.offsetHeight ,
left = ( window.innerWidth - win.offsetWidth ) / 2 ;
win.style.top = top + "px";
win.style.left = left + "px";
};
```
##Animation change example
http://jsfiddle.net/dyL78o6k/2/
```javascript
modal.on( "hide", function ( ) {
win.style.transform = "scale(0)";
} );
modal.on( "show", function ( ) {
win.style.transform = "scale(1)";
} );
```
```CSS
transition: all .7s ease-in; /* changed "top" on "all" */
-o-transition: all .7s ease-in;
-moz-transition: all .7s ease-in;
-webkit-transition: all .7s ease-in;
```
## License
modalJS is licensed under the MIT License (see LICENSE for details).