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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- 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
|
1 |
alertify.alert('Ready!'); |
Alertifyjs Default Options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
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
|
1 |
alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); }); |
Alertify Confirm Dialog
|
1 2 |
alertify.confirm('Confirm Title', 'Confirm Message', function(){ alertify.success('Ok') } , function(){ alertify.error('Cancel')}); |
Alertify Prompt Dialog
|
1 2 3 |
alertify.prompt( 'Prompt Title', 'Prompt Message', 'Prompt Value' , function(evt, value) { alertify.success('You entered: ' + value) } , function() { alertify.error('Cancel') }); |
Alertify Toast Notification
|
1 |
var notification = alertify.notify('sample', 'success', 5, function(){ console.log('dismissed'); }); |
Alertify Multi Dialog Alert Box
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
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}); |
