Basic example
To call a basic ssi-modal is very easy. The only thing you have to do is to call this function
ssi_modal.show({content:'Hello World'})$('button').ssi_modal.show({content:'Hello World'}) $('#modal').click(function () {
ssi_modal.show({
content: 'Hello World'
});
})<button id="modal" class="btn btn-primary">Open modal</button>Size, title, animation
You can change the size of the ssi-modal by setting a
sizeClass option. The valid size values are 'dialog', 'small', 'smallToMedium', 'medium', 'mediumToLarge', 'large', 'full' and 'auto'. Setting {animation:true} gives a nice and simple fade effect to the modal window and to the backdrop. Unfortunatly this is the only built in animation but as we will shall see later you can use out of the box css animation libraries to add any animation you want. You can also use the modalAnimation and backdropAnimation options to set different animations to each element. You can also specify the show or hide animation simply by doing this {animation:{show:true,hide:false} $('#modal2').click(function () {
ssi_modal.show({
content: 'Hello World',
sizeClass: 'small',
title: 'Featured modal',
animation: true
});
})<button id="modal2" class="btn btn-primary">Open modal</button>Confirm - Dialog
There are pre-configured modals tha can be used as a simple dialog or confirm window. To use that you just call
ssi_modal.dialog(options,function(){})ssi_modal.confirm(options,function(result){}) $('#modal3').click(function () {
ssi_modal.confirm({
content: 'Are you sure you want to exit?',
okBtn: {
className:'btn btn-primary'
},
cancelBtn:{
className:'btn btn-danger'
}
},function (result) {
if(result)
ssi_modal.notify('success', {content: 'Result: ' + result});
else
ssi_modal.notify('error', {content: 'Result: ' + result});
}
);
});
$('#modal3b').click(function () {
ssi_modal.dialog({content: 'Hello World', okBtn:{className:'btn btn-primary'}});
})
<button id="modal3" class="btn btn-primary">Confirm</button>
<button id="modal3b" class="btn btn-primary">Dialog</button>Modal with buttons
To use buttons with ssi-modal is very easy just add
{buttons:[buttonOptions1,buttonOptions2]} to the modal's options. Some basic button options are {className:'btn',label:'Ok',closeAfter:true,method:function(event,modal){}} $('#modal4').click(function () {
ssi_modal.show({
content: 'Hello World',
title: 'Modal with buttons',
buttons: [{
className: 'btn btn-primary',
label: 'Ok',
enableAfter: 3,
closeAfter: false,
method: function () {
ssi_modal.notify('info', {content: 'Ok'})
}
}, {
className: 'btn btn-danger',
label: 'Cancel',
closeAfter: true,
method: function () {
ssi_modal.notify('error', {content: 'Cancel'})
}
}]
});
})
<button id="modal4" class="btn btn-primary">Open modal</button>KeepContent
Setting keepContent to true, when you close the modal, the content will not be lost. For more complicated cases, you can change the keepContent option using a modal's button.
ssi_modal.show({content:'...',keepContent:true,buttons:[{label:'cancel',keepContent:false}]},'#modal5')
//Basic example
$('#modal5').click(function () {
ssi_modal.show({content:'<input type="text"/>',keepContent:true},'#modal5')
});
//Complicated example
$('#modal5a').click(function () {
ssi_modal.show({
content: '<form>' +
'<label for="name">Your name:</label><br/>' +
'<input id="name" class="input" name="name" type="text"/><br/>' +
'<label for="email">Your email:</label><br/>' +
'<input id="email" class="input" name="email"/><br/>' +
'<label for="message">Your message:</label><br/>' +
'<textarea id="message" class="input" name="message"></textarea><br/>' +
'</form>',
sizeClass: 'small',
title: 'Keep content',
keepContent: false,
beforeClose: function (modal) {
ssi_modal.confirm({
position: 'top center',
content: 'Your content will be lost! Are you sure you want to continue?',
okBtn:{className:'btn btn-primary'},
cancelBtn:{className:'btn btn-danger'}
},function (result) {
if (result === true) {
modal.options.keepContent=false;
modal.options.beforeClose = '';
modal.close();
ssi_modal.notify('error', {
position: 'center top',
content: "The content removed!"
})
}
});
return false;
},
buttons: [{
className: 'btn btn-danger',
label: 'close',
closeAfter: true,
keepContent: false
}, {
className: 'btn btn-success',
label: 'ok',
closeAfter: false,
keepContent: true,
method: function (e, modal) {
var beforeCloseMethod=modal.options.beforeClose;
modal.options.beforeClose = '';
modal.options.keepContent=true;
modal.close();
modal.options.beforeClose =beforeCloseMethod;
ssi_modal.notify('success', {
position: 'center top',
content: "The content is safe!!"
})
}
}]
},'#modal4');
})
<button id="modal5" class="btn btn-primary">Basic example</button>
<button id="modal5a" class="btn btn-primary">Complicated example</button>Multi levels
With ssi-modal you can open as many modals you want.
$('#modal6').click(function () {
ssi_modal.show({
content: '<button id="modal6b" class="btn btn-primary">Open modal</button>',
sizeClass: 'medium',
title: 'Modal with buttons',
fitScreen: true,
fixedHeight: true,
onClose: function () {
ssi_modal.notify('error', {content: 'first closed'})
}
});
});
var $body = $('body');
$body.on('click.example', '#modal6b', function () {
ssi_modal.show({
content: '<button id="modal6c" class="btn btn-primary">Open modal</butto>',
sizeClass: 'small',
title: 'Second modal',
onClose: function () {
ssi_modal.notify('warning', {content: 'Second closed'})
}
});
});
$body.on('click.example', '#modal6c', function () {
ssi_modal.show({
content: '<a href="images/3b5dd04be82af929dd3070cb089bcf03.jpg" title="My landscape" class="ssi-imgBox"><img src="images/3b5dd04be82af929dd3070cb089bcf03.jpg" style="width:50px;height:50px"/></a>',
sizeClass: 'dialog',
title: 'Third modal',
onClose: function () {
ssi_modal.notify('info', {content: 'Third closed'})
}
});
})
<button id="modal6" class="btn btn-primary">Open modal</button>Callbacks
The ssi-modal supports 4 kind of callbacks:
beforeShow, onShow, beforeClose, onClose. Each one have access to the modal object. If you return false with the beforeClose/beforeShow callbacks, you will prevent to close/open the modal. {beforeClose:function(modal){} $('#modal7').click(function () {
ssi_modal.show({
sizeClass: 'dialog',
className: 'awesomeModal',
title: 'Callbacks',
beforeShow:function(modal){
ssi_modal.notify('info', {content: 'The modal with title: '+modal.options.title+' will open'});
},
onShow: function (modal) {
ssi_modal.notify('success', {content: 'The modal with className: '+modal.options.className+' just opened'});
},
beforeClose:function(modal){
ssi_modal.notify('warning', {content: 'The modal with title: '+modal.options.title+' will close'});
},
onClose: function (modal) {
ssi_modal.notify('error', {content: 'The modal with className: '+modal.options.className+' just closed'});
}
});
})
<button id="modal7" class="btn btn-primary">Open modal</button>Fixed height
With the
fixedHeight option the modal's height doesn't exceed the screen's height. If you want always the modal's height to be like that, even if the content is empty, then the fitScreen option is for you. var modalContent='Start</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>-</br>End';
$('#modal8').click(function () {
ssi_modal.show({
content:modalContent ,
title: 'Normal modal'
});
});
$('#modal8a').click(function () {
ssi_modal.show({
content:' ' ,
title: 'Fixed height',
fixedHeight: true,
buttons:[{side:'left',label:'Add content',method:function(e,modal){modal.setContent(modalContent,'append')}}]
});
});
$('#modal8b').click(function () {
ssi_modal.show({
content:'Hello world' ,
title: 'Fit screen',
fixedHeight: true,
fitScreen:true,
buttons:[{side:'left',label:'Add content',method:function(e,modal){modal.setContent(modalContent,'append')}}]
});
})
<button id="modal8" class="btn btn-primary">Open modal</button>
<button id="modal8a" class="btn btn-primary">Fixed height</button>
<button id="modal8b" class="btn btn-primary">Fit screen</button>Using existing element
You can use an element that is already sitting in the DOM. To do that there are three ways. The first way is to target the object with jquery and add it to the content also set bodyElement option to true
ssi_modal.show({content:$('myDiv'),bodyElement:true}). With the second way you just target the element with jquery and call the function
$('.selector').ssi_modal({options...,bodyElement:true})<button id="button" data-ssi_modal="#simpleDiv">Open</button>$('#button').ssi_modal({options...,bodyElement:true})extendOriginalContent option to true {extendOriginalContent:true}
$('#modal9').click(function(){
ssi_modal.show({
content:$('#simpleDiv'),
bodyElement:true,
title:'ssi-modal',
extendOriginalContent:true
})
});
<button id="modal9" class="btn btn-primary">Open modal</button></br></br>
<div id="simpleDiv"><input type="text" value="Edit me"/></div>Positioning
You can set 6 different positions to the ssi-modal. The valid values are
"right top","center top","left top","right bottom","center bottom","left bottom". var modalOptions={
animation:true,
sizeClass:'dialog'
};
$('#modal10').click(function(){
modalOptions.content='<button id="modal10a" class="btn btn-primary">Left top</button>';
modalOptions.title=modalOptions.position='right top';
ssi_modal.show(modalOptions)
});
var $body=$('body');
$body.on('click.example','#modal10a',function(){
modalOptions.content='<button id="modal10b" class="btn btn-primary">Center bottom</button>';
modalOptions.title= modalOptions.position='left top';
ssi_modal.show(modalOptions)
});
$body.on('click.example','#modal10b',function(){
modalOptions.content='<button id="modal10c" class="btn btn-primary">Left bottom</button>';
modalOptions.title=modalOptions.position='center bottom';
ssi_modal.show(modalOptions)
});
$body.on('click.example','#modal10c',function(){
modalOptions.content='<button id="modal10d" class="btn btn-primary">Right bottom</button>';
modalOptions.title= modalOptions.position='left bottom';
ssi_modal.show(modalOptions)
});
$body.on('click.example','#modal10d',function(){
modalOptions.content='<button id="modal10e" class="btn btn-primary">Center top</button>';
modalOptions.title= modalOptions.position='right bottom';
ssi_modal.show(modalOptions)
});
$body.on('click.example','#modal10e',function(){
modalOptions.content='The end!!<br><br><button id="modal10f" class="btn btn-primary">Remove all</button>';
modalOptions.title= modalOptions.position='center top';
ssi_modal.show(modalOptions)
});
$body.on('click.example','#modal10f',function(){
ssi_modal.removeAll();
})
<button id="modal10" class="btn btn-primary">Right top</button>Stack modals
If you are using positioned modal the you can also use the
stack option.This option makes the modal to be in a vertical row. Just set {stack:true}. var $body=$('body');
$body.on('click.example','#modal11',function(){
ssi_modal.show({
title:'stackModal left top',
position:'left top',
content:'<button id="modal11a" class="btn btn-primary">Open modal</button>',
backdrop:false,
stack:true
})
});
$body.on('click.example','#modal11a',function(){
ssi_modal.show({
title:'stackModal right top',
position:'right top',
content:'<button id="modal11" class="btn btn-primary">Open modal</button>',
backdrop:false,
stack:true
})
});
<button id="modal11" class="btn btn-primary">Open modal</button>Using animations
The ssi-modal is compatible with animations but it hasn't any built in. You can create your own animations or can use any animation library. Use
{modalAnimation:{show:'animationClass',hide:'animationClass'}}{backdropAnimation:{show:'animationClass',hide:'animationClass'}}{animation:{show:'animationClass',hide:'animationClass'}} $('#modal12').click(function(){
ssi_modal.show({
title:'Flip',
animation:{
show:'animated flipInY',
hide:'animated flipOutY'
},
content:' '
})
});
$('#modal12a').click(function(){
ssi_modal.show({
title:'lightSpeed',
modalAnimation:{
show:'animated lightSpeedIn',
hide:'animated lightSpeedOut'
},
backdropAnimation:true,
content:' '
})
});
$('#modal12b').click(function(){
ssi_modal.show({
title:'Roll',
modalAnimation:{
show:'animated rollIn',
hide:'animated rollOut'
},
backdropAnimation:{
show:'animated zoomIn',
hide:'animated zoomOut'
},
content:'<button id="modal11" class="btn btn-primary">Open modal</button>'
})
})
<button id="modal12" class="btn btn-primary">Open modal</button>
<button id="modal12a" class="btn btn-primary">Open modal</button>
<button id="modal12b" class="btn btn-primary">Open modal</button>Modal as notification message
As you can see you have a lot of options that you can use for several proposes. Mixing up some options you can easily create a toast like notification message.The cool thing is that these options are already done for you by calling
ssi_modal.notify("type",options).
//====== right top ======
$('#notify').click(function () {
ssi_modal.notify('success', {
content: 'You have successfully upload the file!',
modalAnimation: {
'show': 'animated fadeInRight mediumSpeed',
'hide': 'animated fadeOutRight mediumSpeed'
}
});
});
//====== left top ======
$('#notify2').click(function () {
ssi_modal.notify('error', {
position: 'left top',
backdrop:'shared',outSideClose:true,
content: 'An error occurred.',
buttons:[
{label:'Shared backdrop',className:'btn btn-primary btn-xs',method:function(){ssi_modal.notify('info',{content:'hi',outSideClose:true,backdrop:'shared'})}},
{label:'Without backdrop',className:'btn btn-warning btn-xs',method:function(){ssi_modal.notify('warning',{content:'hi'})}}
]
})
});
//====== left bottom ======
$("#notify3").click(function () {
ssi_modal.notify('info', {position: 'right bottom', content: 'Hello there'})
});
$('#notify4').click(function () {
ssi_modal.notify('warning', {
position: 'left bottom',
content: 'You have to register first to see the content!'
})
});
//====== center top ======
$('#notify5').click(function () {
ssi_modal.notify('dialog', {
sizeClass:'medium',
okBtn:{className:'btn btn-primary'},
position: 'center top',
content: 'This site uses cookies to provide better services!'
},function(){})
});
//====== center bottom ======
$('#notify6').click(function () {
ssi_modal.notify('confirm', {
closeIcon: true,
okBtn:{className:'btn btn-primary'},
cancelBtn:{className:'btn btn-danger'},
position: 'center bottom',
content: 'Are you sure you want to exit?'
}, function (result) {
if (result) {
ssi_modal.notify('success', {content: 'Result: ' + result})
} else {
ssi_modal.notify('error', {content: 'Result: ' + result})
}
})
});
//====== custom full ======
$('#notify7').click(function () {
ssi_modal.notify('custom', {
sizeClass:'full',
icon:'fa fa-glass',
position: 'center top',
content: 'This is a custom notification message!'
})
})
<button id="notify" class="btn btn-success">Right top</button>
<button id="notify2" class="btn btn-danger">Left top</button>
<button id="notify3" class="btn btn-primary">Right bottom</button>
<button id="notify4" class="btn btn-warning">Left bottom</button>
<button id="notify5" class="btn btn-default">Center top</button>
<button id="notify6" class="btn btn-default">Center bottom</button>
<button id="notify7" class="btn btn-default">Custom full width</button>Image box
Until now we have see really nice things with this modal. This is one more functionality that makes this modal more awesome! Just add the ssi-imgBox class name to a link like this
<a href="path/to/img.jpg" class="ssi-imgBox">My cat</a> 
<a href="http://www.wallpapereast.com/static/images/Dragon-Backgrounds-Wallpaper-Hd-44.jpg" title="Dragon" class="ssi-imgBox">My dragon</a>
<a href="images/rolling-stones.jpg" class="ssi-imgBox">
<img src="images/rolling-stones.jpg"/>
</a>ImgBox option
The image box is another type of ssi-modal, That means tha can get pretty much the same options as a normal modal.To set you own options just call the
ssi_modal.imgBox(options)data-alt attribute with a message, this message will display when the image is missing.
ssi_modal.imgBox({
animation: true,
title: true,
hideImgButtons:true,
imgButtons: [{
type: 'link',
label: '<i class="fa fa-thumbs-up fa-2x"></i>',
closeAfter: false,
method: function (e,modal) {
ssi_modal.notify('info', {
content: 'Title: ' + modal.imgTitle,
sizeClass:'auto',
icon: false,
title: '<i class="fa fa-thumbs-up"></i> Like'
})
}
}, {
type: 'link',
exclude: 'awesome',
showIn: '',
label: '<i class="fa fa-thumbs-down fa-2x" style="color:#ff6a7d"></i>',
closeAfter: false,
method: function (e,modal) {
ssi_modal.notify('error', {
content:'Title: '+ modal.imgTitle+'<br>Url: '+modal.imgUrl,
sizeClass:'auto',
icon: 'fa fa-thumbs-down',
title: ' Dislike'
})
}
}]
},'group1');
<a data-ssi_imgGroup="group1" href="http://www.wallpapereast.com/static/images/Dragon-Backgrounds-Wallpaper-Hd-44.jpg" title="My awesome dragon" class="ssi-imgBox">My dragon</a>
<a data-ssi_imgGroup="group1" href="images/test/oops.jpg" title="Me and my dragon" data-alt="Me and my dragon playing in my ward!" class="ssi-imgBox">
<img alt="Me and my dragon playing in my ward!" src="images/test/oops.jpg"/>
</a>
<a data-ssi_imgGroup="group1" href="images/42253_metallica.jpg" title="Metallica" class="ssi-imgBox awesome">
<img src="images/42253_metallica.jpg"/>
</a>ImageBox groups
Image groups, as you realize, are group of images that you can navigate through. The awesome thing is that you can set different settings for each group.To do that just set a data-ssi_imgGroup attribute to the link with a group name
<a href="path/to/img.jpg" data-ssi_imgGroup="groupName" class="ssi-imgBox">My cat</a> ssi_modal.imgBox(options,'groupName')
ssi_modal.imgBox({
title: true,
animation: true,
center: true,
iframe: {className: 'idd'}
}, 'landscapes');
ssi_modal.imgBox({
title: false,
backdropAnimation: true,
modalAnimation: {
'show': 'animated rotateInDownLeft',
hide: 'animated rotateOutDownLeft'
}
}, 'bands');
<a data-ssi_imgGroup="landscapes" href="https://player.vimeo.com/video/29950141?byline=0&portrait=0" title="Landscapes" class="ssi-imgBox">
<img src="images/3b5dd04be82af929dd3070cb089bcf03.jpg"/>
</a>
<a data-ssi_imgGroup="landscapes" href="images/ipad.jpg" title="Landscapes" class="ssi-imgBox">
<img src="images/ipad.jpg"/>
</a>
<a data-ssi_imgGroup="landscapes" href="images/canada-view-niblet_71483_600x450.jpg" title="Canada" class="ssi-imgBox">
<img src="images/canada-view-niblet_71483_600x450.jpg"/>
</a>
<a data-ssi_imgGroup="bands" href="images/iron-maiden-fear-live-i15906.jpg" title="My landscape" class="ssi-imgBox">
<img src="images/iron-maiden-fear-live-i15906.jpg"/>
</a>
<a data-ssi_imgGroup="bands" href="images/brand.gif" title="Landscapes" class="ssi-imgBox">
<img src="images/brand.gif"/>
</a>
<a data-ssi_imgGroup="bands" href="images/master_of_puppets_album.jpg" title="Metallica" class="ssi-imgBox awesome">
<img src="images/master_of_puppets_album.jpg"/>
</a>
