Welcome folks today in this blog post we will be talking about alertifyjs javascript alert box library. All the source used in blog will be shown below
Get Started
In order to get started you need to go to alertifyjs official website here and download the source code files.
Installation
In order to install this library we can either include by cdn or we can install this as a npm dependency
Alertifyjs CDN
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.min.css"/>
<!--
RTL version
-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.rtl.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.rtl.min.css"/>
<!-- Semantic UI theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/semantic.rtl.min.css"/>
<!-- Bootstrap theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/bootstrap.rtl.min.css"/>
Alertifyjs NPM
Execute this command on your pc to install alertifyjs
npm i alertifyjs
Basic Alert Box
alertify.alert('Ready!');
Alertifyjs Default Options
alertify.defaults = {
// dialogs defaults
autoReset:true,
basic:false,
closable:true,
closableByDimmer:true,
invokeOnCloseOff:false,
frameless:false,
defaultFocusOff:false,
maintainFocus:true, // <== global default not per instance, applies to all dialogs
maximizable:true,
modal:true,
movable:true,
moveBounded:false,
overflow:true,
padding: true,
pinnable:true,
pinned:true,
preventBodyShift:false, // <== global default not per instance, applies to all dialogs
resizable:true,
startMaximized:false,
transition:'pulse',
transitionOff:false,
tabbable:'button:not(:disabled):not(.ajs-reset),[href]:not(:disabled):not(.ajs-reset),input:not(:disabled):not(.ajs-reset),select:not(:disabled):not(.ajs-reset),textarea:not(:disabled):not(.ajs-reset),[tabindex]:not([tabindex^="-"]):not(:disabled):not(.ajs-reset)', // <== global default not per instance, applies to all dialogs
// notifier defaults
notifier:{
// auto-dismiss wait time (in seconds)
delay:5,
// default position
position:'bottom-right',
// adds a close button to notifier messages
closeButton: false,
// provides the ability to rename notifier classes
classes : {
base: 'alertify-notifier',
prefix:'ajs-',
message: 'ajs-message',
top: 'ajs-top',
right: 'ajs-right',
bottom: 'ajs-bottom',
left: 'ajs-left',
center: 'ajs-center',
visible: 'ajs-visible',
hidden: 'ajs-hidden',
close: 'ajs-close'
}
},
// language resources
glossary:{
// dialogs default title
title:'AlertifyJS',
// ok button text
ok: 'OK',
// cancel button text
cancel: 'Cancel'
},
// theme settings
theme:{
// class name attached to prompt dialog input textbox.
input:'ajs-input',
// class name attached to ok button
ok:'ajs-ok',
// class name attached to cancel button
cancel:'ajs-cancel'
},
// global hooks
hooks:{
// invoked before initializing any dialog
preinit:function(instance){},
// invoked after initializing any dialog
postinit:function(instance){},
},
};
Alertify Success Dialog
alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); });
Alertify Confirm Dialog
alertify.confirm('Confirm Title', 'Confirm Message', function(){ alertify.success('Ok') }
, function(){ alertify.error('Cancel')});
Alertify Prompt Dialog
alertify.prompt( 'Prompt Title', 'Prompt Message', 'Prompt Value'
, function(evt, value) { alertify.success('You entered: ' + value) }
, function() { alertify.error('Cancel') });
Alertify Toast Notification
var notification = alertify.notify('sample', 'success', 5, function(){ console.log('dismissed'); });
Alertify Multi Dialog Alert Box
window.showAlert = function(){
alertify.alert('<a href="javascript:showConfirm();">Show Confirm</a>');
}
window.showConfirm = function(){
alertify.confirm('<a href="javascript:showAlert();">Show Alert</a>');
}
//works with modeless too
alertify.alert().setting('modal', true);
alertify.confirm().setting('modal', true);
window.showAlert();
Alertify License Agreement Dialog
<div id="la">
The MIT License (MIT)
Copyright (c) 2014 Mohammad Younes
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
</div>
var pre = document.createElement('pre');
//custom style.
pre.style.maxHeight = "400px";
pre.style.margin = "0";
pre.style.padding = "24px";
pre.style.whiteSpace = "pre-wrap";
pre.style.textAlign = "justify";
pre.appendChild(document.createTextNode($('#la').text()));
//show as confirm
alertify.confirm(pre, function(){
alertify.success('Accepted');
},function(){
alertify.error('Declined');
}).set({labels:{ok:'Accept', cancel: 'Decline'}, padding: false});
Alertify Youtube Video Dialog
alertify.YoutubeDialog || alertify.dialog('YoutubeDialog',function(){
var iframe;
return {
// dialog constructor function, this will be called when the user calls alertify.YoutubeDialog(videoId)
main:function(videoId){
//set the videoId setting and return current instance for chaining.
return this.set({
'videoId': videoId
});
},
// we only want to override two options (padding and overflow).
setup:function(){
return {
options:{
//disable both padding and overflow control.
padding : !1,
overflow: !1,
}
};
},
// This will be called once the DOM is ready and will never be invoked again.
// Here we create the iframe to embed the video.
build:function(){
// create the iframe element
iframe = document.createElement('iframe');
iframe.frameBorder = "no";
iframe.width = "100%";
iframe.height = "100%";
// add it to the dialog
this.elements.content.appendChild(iframe);
//give the dialog initial height (half the screen height).
this.elements.body.style.minHeight = screen.height * .5 + 'px';
},
// dialog custom settings
settings:{
videoId:undefined
},
// listen and respond to changes in dialog settings.
settingUpdated:function(key, oldValue, newValue){
switch(key){
case 'videoId':
iframe.src = "https://www.youtube.com/embed/" + newValue + "?enablejsapi=1";
break;
}
},
// listen to internal dialog events.
hooks:{
// triggered when the dialog is closed, this is seperate from user defined onclose
onclose: function(){
iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
},
// triggered when a dialog option gets update.
// warning! this will not be triggered for settings updates.
onupdate: function(option,oldValue, newValue){
switch(option){
case 'resizable':
if(newValue){
this.elements.content.removeAttribute('style');
iframe && iframe.removeAttribute('style');
}else{
this.elements.content.style.minHeight = 'inherit';
iframe && (iframe.style.minHeight = 'inherit');
}
break;
}
}
}
};
});
//show the dialog
alertify.YoutubeDialog('GODhPuM5cEE').set({frameless:false});
