Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

zebra_dialog

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zebra_dialog - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

examples/favicon.ico
LICENSE.md

8

CHANGELOG.md

@@ -1,3 +0,9 @@

## version 1.5 (July 05, 2018)
## version 1.6.0 (July 10, 2018)
- "warning" dialog boxes now have "Yes" and "No" buttons instead of just the "Ok" button
- changed the labels for the buttons on "confirmation" dialog boxes from "Yes" and "No" to "Ok" and "Cancel"
- revamped example pages
## version 1.5.0 (July 05, 2018)
- fixed bug where inputs in dialog box could never receive focus on mobile devices - see [#14](https://github.com/stefangabos/Zebra_Dialog/issues/14), thanks [Clément](https://github.com/chou666)!

@@ -4,0 +10,0 @@ - fixed [#18](https://github.com/stefangabos/Zebra_Dialog/issues/18) where the plugin was not working in IE8

2

dist/zebra_dialog.min.js

@@ -1,1 +0,1 @@

!function(t){"use strict";t.Zebra_Dialog=function(){this.version="1.5";var e,s={animation_speed_hide:250,animation_speed_show:0,auto_close:!1,buttons:!0,center_buttons:!1,custom_class:!1,keyboard:!0,max_height:0,message:"",modal:!0,overlay_close:!0,overlay_opacity:".9",position:"center",reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onClose:null},i=this,o={},a=function(){var s,o,a,r=t(window).width(),g=t(window).height(),c=i.dialog.width(),d=i.dialog.height(),p={left:0,top:0,right:r-c,bottom:g-d,center:(r-c)/2,middle:(g-d)/2};i.dialog_left=void 0,i.dialog_top=void 0,t.isArray(i.settings.position)&&2===i.settings.position.length&&"string"==typeof i.settings.position[0]&&i.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof i.settings.position[1]&&i.settings.position[1].match(/^(top|bottom|middle)[\s0-9\+\-]*$/)&&(i.settings.position[0]=i.settings.position[0].toLowerCase(),i.settings.position[1]=i.settings.position[1].toLowerCase(),t.each(p,function(t,e){var s,o;for(s=0;s<2;s++)(o=i.settings.position[s].replace(t,e))!==i.settings.position[s]&&(0===s?i.dialog_left=l(o):i.dialog_top=l(o))})),void 0!==i.dialog_left&&void 0!==i.dialog_top||(i.dialog_left=p.center,i.dialog_top=p.middle),i.dialog_top<0&&(i.dialog_top=0),d>g&&i.message.css("height",g-(t(".ZebraDialog_Title",i.dialog)?t(".ZebraDialog_Title",i.dialog).outerHeight():0)-(t(".ZebraDialog_ButtonsOuter",i.dialog)?t(".ZebraDialog_ButtonsOuter",i.dialog).outerHeight():0)-(parseFloat(i.message.css("paddingTop"))||0)-(parseFloat(i.message.css("paddingBottom"))||0)-(parseFloat(i.message.css("borderTopWidth"))||0)-(parseFloat(i.message.css("borderBottomWidth"))||0)),i.settings.vcenter_short_message&&(o=(s=i.message.find("div:first")).height())<(a=i.message.height())&&s.css({"padding-top":(a-o)/2}),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===i.settings.reposition_speed?i.dialog.css({left:i.dialog_left,top:i.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},i.settings.animation_speed_show):(i.dialog.stop(!0),i.dialog.css("visibility","visible").animate({left:i.dialog_left,top:i.dialog_top},i.settings.reposition_speed)),void 0===e&&i.dialog.find("a[class^=ZebraDialog_Button]:first").focus(),i.isIE6&&setTimeout(n,500)},n=function(){var e=t(window).scrollTop(),s=t(window).scrollLeft();i.settings.modal&&i.overlay.css({top:e,left:s}),i.dialog.css({left:i.dialog_left+s,top:i.dialog_top+e})},r=function(){if(!0!==i.settings.buttons&&!t.isArray(i.settings.buttons))return!1;if(!0===i.settings.buttons)switch(i.settings.type){case"question":i.settings.buttons=["Yes","No"];break;default:i.settings.buttons=["Ok"]}return i.settings.buttons},g=function(){switch(i.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":return i.settings.type.charAt(0).toUpperCase()+i.settings.type.slice(1).toLowerCase();default:return!1}},l=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e},c={init:function(){this.name=this.searchString(this.dataBrowser)||"",this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||""},searchString:function(t){var e,s,i;for(e=0;e<t.length;e++)if(s=t[e].string,i=t[e].prop,this.versionSearchString=t[e].versionSearch||t[e].identity,s){if(-1!==s.indexOf(t[e].subString))return t[e].identity}else if(i)return t[e].identity},searchVersion:function(t){var e=t.indexOf(this.versionSearchString);if(-1!==e)return parseFloat(t.substring(e+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"MSIE",identity:"explorer",versionSearch:"MSIE"}]};return i.settings={},"string"==typeof arguments[0]&&(o.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(o=t.extend(o,"object"==typeof arguments[0]?arguments[0]:arguments[1])),i.init=function(){var l,d,p,u,h,f,m,_,v,b,y,w;if(i.settings=t.extend({},s,o),i.isIE6="explorer"===c.name&&6===c.version||!1,i.settings.modal&&(i.overlay=t("<div>",{class:"ZebraDialogOverlay"}).css({position:i.isIE6?"absolute":"fixed",left:0,top:0,opacity:i.settings.overlay_opacity}),i.settings.overlay_close&&i.overlay.on("click",function(){i.close()}),i.overlay.appendTo("body")),i.dialog=t("<div>",{class:"ZebraDialog"+(i.settings.custom_class?" "+i.settings.custom_class:"")}).css({position:i.isIE6?"absolute":"fixed",left:0,top:0,visibility:"hidden"}),!i.settings.buttons&&i.settings.auto_close&&i.dialog.attr("id","ZebraDialog_"+Math.floor(9999999*Math.random())),y=parseInt(i.settings.width,10),!isNaN(y)&&y===i.settings.width&&y.toString()===i.settings.width.toString()&&y>0&&i.dialog.css({width:i.settings.width}),i.settings.title&&(b=t("<h3>",{class:"ZebraDialog_Title"}).html(i.settings.title).appendTo(i.dialog)),u=r(),d=t("<div>",{class:"ZebraDialog_BodyOuter"+(i.settings.title?"":" ZebraDialog_NoTitle")+(u?"":" ZebraDialog_NoButtons")}).appendTo(i.dialog),i.message=t("<div>",{class:"ZebraDialog_Body"+(!1!==g()?" ZebraDialog_Icon ZebraDialog_"+g():"")}),i.settings.max_height>0&&(i.message.css("max-height",i.settings.max_height),i.isIE6&&i.message.attr("style","height: expression(this.scrollHeight > "+i.settings.max_height+' ? "'+i.settings.max_height+'px" : "85px")')),i.settings.vcenter_short_message?t("<div>").html(i.settings.message).appendTo(i.message):i.message.html(i.settings.message),i.settings.source&&"object"==typeof i.settings.source){h=i.settings.vcenter_short_message?t("div:first",i.message):i.message;for(w in i.settings.source)switch(w){case"ajax":l="string"==typeof i.settings.source[w]?{url:i.settings.source[w]}:i.settings.source[w],v=t("<div>").attr("class","ZebraDialog_Preloader").appendTo(h),l.success=function(t){v.remove(),h.append(t),a(!1)},t.ajax(l);break;case"iframe":m={width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},_=t.extend(m,"string"==typeof i.settings.source[w]?{src:i.settings.source[w]}:i.settings.source[w]),h.append(t("<iframe>").attr(_));break;case"inline":h.append(i.settings.source[w])}}return i.message.appendTo(d),u&&(u.reverse(),p=t("<div>",{class:"ZebraDialog_Buttons"}).appendTo(i.dialog),t.each(u,function(e,s){var o=t("<a>",{href:"javascript:void(0)",class:"ZebraDialog_Button_"+e+(void 0!==s.custom_class&&""!==s.custom_class.toString().trim()?" "+s.custom_class:"")});void 0!==s.caption?o.html(s.caption):o.html(s),o.on("click",function(){var t=!0;void 0!==s.callback&&(t=s.callback(i.dialog)),!1!==t&&i.close(void 0!==s.caption?s.caption:s)}),o.appendTo(p)}),p.wrap(t("<div>").addClass("ZebraDialog_ButtonsOuter"+(i.settings.center_buttons?" ZebraDialog_Buttons_Centered":"")))),i.dialog.appendTo("body"),i.settings.show_close_button&&(f=t('<a href="javascript:void(0)" class="ZebraDialog_Close">&times;</a>').on("click",function(t){t.preventDefault(),i.close()}).appendTo(b||i.message),b&&f.css({right:parseInt(b.css("paddingRight"),10),top:(parseInt(b.css("height"),10)+parseInt(b.css("paddingTop"),10)+parseInt(b.css("paddingBottom"),10)-f.height())/2})),t(window).on("resize.Zebra_Dialog",function(){clearTimeout(e),e=setTimeout(function(){a()},100)}),i.settings.keyboard&&t(document).on("keyup.Zebra_Dialog",function(t){return 27===t.which&&i.close(),!0}),i.isIE6&&t(window).on("scroll.Zebra_Dialog",function(){n()}),!1!==i.settings.auto_close&&(i.dialog.on("click",function(){clearTimeout(i.timeout),i.close()}),i.timeout=setTimeout(i.close,i.settings.auto_close)),a(!1),i},i.close=function(e){t(document).off(".Zebra_Dialog"),t(window).off(".Zebra_Dialog"),i.overlay&&i.overlay.animate({opacity:"0"},i.settings.animation_speed_hide,function(){i.overlay.remove()}),i.dialog.animate({top:"0",opacity:"0"},i.settings.animation_speed_hide,function(){i.dialog.remove(),i.settings.onClose&&"function"==typeof i.settings.onClose&&i.settings.onClose(void 0!==e?e:"")})},c.init(),i.init()}}(jQuery);
!function(t){"use strict";t.Zebra_Dialog=function(){this.version="1.6.0";var e,s={animation_speed_hide:250,animation_speed_show:0,auto_close:!1,buttons:!0,center_buttons:!1,custom_class:!1,keyboard:!0,max_height:0,message:"",modal:!0,overlay_close:!0,overlay_opacity:".9",position:"center",reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onClose:null},i=this,o={},a=function(){var s,o,a,r=t(window).width(),g=t(window).height(),c=i.dialog.width(),d=i.dialog.height(),p={left:0,top:0,right:r-c,bottom:g-d,center:(r-c)/2,middle:(g-d)/2};i.dialog_left=void 0,i.dialog_top=void 0,t.isArray(i.settings.position)&&2===i.settings.position.length&&"string"==typeof i.settings.position[0]&&i.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof i.settings.position[1]&&i.settings.position[1].match(/^(top|bottom|middle)[\s0-9\+\-]*$/)&&(i.settings.position[0]=i.settings.position[0].toLowerCase(),i.settings.position[1]=i.settings.position[1].toLowerCase(),t.each(p,function(t,e){var s,o;for(s=0;s<2;s++)(o=i.settings.position[s].replace(t,e))!==i.settings.position[s]&&(0===s?i.dialog_left=l(o):i.dialog_top=l(o))})),void 0!==i.dialog_left&&void 0!==i.dialog_top||(i.dialog_left=p.center,i.dialog_top=p.middle),i.dialog_top<0&&(i.dialog_top=0),d>g&&i.message.css("height",g-(t(".ZebraDialog_Title",i.dialog)?t(".ZebraDialog_Title",i.dialog).outerHeight():0)-(t(".ZebraDialog_ButtonsOuter",i.dialog)?t(".ZebraDialog_ButtonsOuter",i.dialog).outerHeight():0)-(parseFloat(i.message.css("paddingTop"))||0)-(parseFloat(i.message.css("paddingBottom"))||0)-(parseFloat(i.message.css("borderTopWidth"))||0)-(parseFloat(i.message.css("borderBottomWidth"))||0)),i.settings.vcenter_short_message&&(o=(s=i.message.find("div:first")).height())<(a=i.message.height())&&s.css({"padding-top":(a-o)/2}),"boolean"==typeof arguments[0]&&!1===arguments[0]||0===i.settings.reposition_speed?i.dialog.css({left:i.dialog_left,top:i.dialog_top,visibility:"visible",opacity:0}).animate({opacity:"1"},i.settings.animation_speed_show):(i.dialog.stop(!0),i.dialog.css("visibility","visible").animate({left:i.dialog_left,top:i.dialog_top},i.settings.reposition_speed)),void 0===e&&i.dialog.find("a[class^=ZebraDialog_Button]:first").focus(),i.isIE6&&setTimeout(n,500)},n=function(){var e=t(window).scrollTop(),s=t(window).scrollLeft();i.settings.modal&&i.overlay.css({top:e,left:s}),i.dialog.css({left:i.dialog_left+s,top:i.dialog_top+e})},r=function(){if(!0!==i.settings.buttons&&!t.isArray(i.settings.buttons))return!1;if(!0===i.settings.buttons)switch(i.settings.type){case"question":case"warning":i.settings.buttons=["Ok","Cancel"];break;default:i.settings.buttons=["Ok"]}return i.settings.buttons},g=function(){switch(i.settings.type){case"confirmation":case"error":case"information":case"question":case"warning":return i.settings.type.charAt(0).toUpperCase()+i.settings.type.slice(1).toLowerCase();default:return!1}},l=function(t){var e=0;for(t=t.replace(/\s/g,"").match(/[+\-]?([0-9\.\s]+)/g)||[];t.length;)e+=parseFloat(t.shift());return e},c={init:function(){this.name=this.searchString(this.dataBrowser)||"",this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||""},searchString:function(t){var e,s,i;for(e=0;e<t.length;e++)if(s=t[e].string,i=t[e].prop,this.versionSearchString=t[e].versionSearch||t[e].identity,s){if(-1!==s.indexOf(t[e].subString))return t[e].identity}else if(i)return t[e].identity},searchVersion:function(t){var e=t.indexOf(this.versionSearchString);if(-1!==e)return parseFloat(t.substring(e+this.versionSearchString.length+1))},dataBrowser:[{string:navigator.userAgent,subString:"MSIE",identity:"explorer",versionSearch:"MSIE"}]};return i.settings={},"string"==typeof arguments[0]&&(o.message=arguments[0]),"object"!=typeof arguments[0]&&"object"!=typeof arguments[1]||(o=t.extend(o,"object"==typeof arguments[0]?arguments[0]:arguments[1])),i.init=function(){var l,d,p,u,h,f,m,_,v,b,y,w;if(i.settings=t.extend({},s,o),i.isIE6="explorer"===c.name&&6===c.version||!1,i.settings.modal&&(i.overlay=t("<div>",{class:"ZebraDialogOverlay"}).css({position:i.isIE6?"absolute":"fixed",left:0,top:0,opacity:i.settings.overlay_opacity}),i.settings.overlay_close&&i.overlay.on("click",function(){i.close()}),i.overlay.appendTo("body")),i.dialog=t("<div>",{class:"ZebraDialog"+(i.settings.custom_class?" "+i.settings.custom_class:"")}).css({position:i.isIE6?"absolute":"fixed",left:0,top:0,visibility:"hidden"}),!i.settings.buttons&&i.settings.auto_close&&i.dialog.attr("id","ZebraDialog_"+Math.floor(9999999*Math.random())),y=parseInt(i.settings.width,10),!isNaN(y)&&y===i.settings.width&&y.toString()===i.settings.width.toString()&&y>0&&i.dialog.css({width:i.settings.width}),i.settings.title&&(b=t("<h3>",{class:"ZebraDialog_Title"}).html(i.settings.title).appendTo(i.dialog)),u=r(),d=t("<div>",{class:"ZebraDialog_BodyOuter"+(i.settings.title?"":" ZebraDialog_NoTitle")+(u?"":" ZebraDialog_NoButtons")}).appendTo(i.dialog),i.message=t("<div>",{class:"ZebraDialog_Body"+(!1!==g()?" ZebraDialog_Icon ZebraDialog_"+g():"")}),i.settings.max_height>0&&(i.message.css("max-height",i.settings.max_height),i.isIE6&&i.message.attr("style","height: expression(this.scrollHeight > "+i.settings.max_height+' ? "'+i.settings.max_height+'px" : "85px")')),i.settings.vcenter_short_message?t("<div>").html(i.settings.message).appendTo(i.message):i.message.html(i.settings.message),i.settings.source&&"object"==typeof i.settings.source){h=i.settings.vcenter_short_message?t("div:first",i.message):i.message;for(w in i.settings.source)switch(w){case"ajax":l="string"==typeof i.settings.source[w]?{url:i.settings.source[w]}:i.settings.source[w],v=t("<div>").attr("class","ZebraDialog_Preloader").appendTo(h),l.success=function(t){v.remove(),h.append(t),a(!1)},t.ajax(l);break;case"iframe":m={width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},_=t.extend(m,"string"==typeof i.settings.source[w]?{src:i.settings.source[w]}:i.settings.source[w]),h.append(t("<iframe>").attr(_));break;case"inline":h.append(i.settings.source[w])}}return i.message.appendTo(d),u&&(u.reverse(),p=t("<div>",{class:"ZebraDialog_Buttons"}).appendTo(i.dialog),t.each(u,function(e,s){var o=t("<a>",{href:"javascript:void(0)",class:"ZebraDialog_Button_"+e+(void 0!==s.custom_class&&""!==s.custom_class.toString().trim()?" "+s.custom_class:"")});void 0!==s.caption?o.html(s.caption):o.html(s),o.on("click",function(){var t=!0;void 0!==s.callback&&(t=s.callback(i.dialog)),!1!==t&&i.close(void 0!==s.caption?s.caption:s)}),o.appendTo(p)}),p.wrap(t("<div>").addClass("ZebraDialog_ButtonsOuter"+(i.settings.center_buttons?" ZebraDialog_Buttons_Centered":"")))),i.dialog.appendTo("body"),i.settings.show_close_button&&(f=t('<a href="javascript:void(0)" class="ZebraDialog_Close">&times;</a>').on("click",function(t){t.preventDefault(),i.close()}).appendTo(b||i.message),b&&f.css({right:parseInt(b.css("paddingRight"),10),top:(parseInt(b.css("height"),10)+parseInt(b.css("paddingTop"),10)+parseInt(b.css("paddingBottom"),10)-f.height())/2})),t(window).on("resize.Zebra_Dialog",function(){clearTimeout(e),e=setTimeout(function(){a()},100)}),i.settings.keyboard&&t(document).on("keyup.Zebra_Dialog",function(t){return 27===t.which&&i.close(),!0}),i.isIE6&&t(window).on("scroll.Zebra_Dialog",function(){n()}),!1!==i.settings.auto_close&&(i.dialog.on("click",function(){clearTimeout(i.timeout),i.close()}),i.timeout=setTimeout(i.close,i.settings.auto_close)),a(!1),i},i.close=function(e){t(document).off(".Zebra_Dialog"),t(window).off(".Zebra_Dialog"),i.overlay&&i.overlay.animate({opacity:"0"},i.settings.animation_speed_hide,function(){i.overlay.remove()}),i.dialog.animate({top:"0",opacity:"0"},i.settings.animation_speed_hide,function(){i.dialog.remove(),i.settings.onClose&&"function"==typeof i.settings.onClose&&i.settings.onClose(void 0!==e?e:"")})},c.init(),i.init()}}(jQuery);

25

dist/zebra_dialog.src.js

@@ -5,3 +5,3 @@ /**

* A small, compact (one JS file, no dependencies other than jQuery 1.7.0+) and highly configurable dialog box plugin
* for jQuery meant to replace JavaScript's native "alert" and "confirmation" windows.
* for jQuery, meant to replace JavaScript's native "alert" and "confirmation" dialogs.
*

@@ -13,6 +13,5 @@ * Can also be used as a notification widget - when configured to show no buttons and to close automatically - for updates

*
* - great looks - out of the box, with 2 themes included
* - great looks out of the box, with 2 themes included
* - 5 types of dialog boxes available: confirmation, information, warning, error and question
* - content can also be added through AJAX calls, iFrames, or from inline elements (together with attached events)
* - easily customizable appearance by changing the CSS file
* - create modal or non-modal dialog boxes

@@ -22,3 +21,3 @@ * - easily add custom buttons

* - use callback functions to handle user's choice
* - works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
* - works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+
*

@@ -28,3 +27,3 @@ * Read more {@link https://github.com/stefangabos/Zebra_Dialog/ here}

* @author Stefan Gabos <contact@stefangabos.ro>
* @version 1.5 (last revision: July 05, 2018)
* @version 1.6.0 (last revision: July 09, 2018)
* @copyright (c) 2011 - 2018 Stefan Gabos

@@ -41,3 +40,3 @@ * @license http://www.gnu.org/licenses/lgpl-3.0.txt GNU LESSER GENERAL PUBLIC LICENSE

// so you can tell the version number even if all you have is the minified source
this.version = '1.5';
this.version = '1.6.0';

@@ -66,4 +65,4 @@ // default options

// If set to TRUE, the default buttons will be used, depending
// on the type of the dialog box: ['Yes', 'No'] for "question"
// type and ['Ok'] for the other dialog box types.
// on the type of the dialog box: ['Ok', 'Cancel'] for "warning"
// and "question" types and ['Ok'] for the other dialog box types.
//

@@ -278,5 +277,6 @@ // For custom buttons, use an array containing the captions of

//
// By default, all types except "question" have a single button
// with the caption "Ok"; type "question" has two buttons, with
// the captions "Ok" and "Cancel" respectively.
// By default, the "warning" and "question" types have two
// buttons with the captions "Ok" and "Cancel" respectively,
// while the other types have a single button with the caption
// "Ok".
//

@@ -549,5 +549,6 @@ // Default is "information".

case 'question':
case 'warning':
// there are two buttons
plugin.settings.buttons = ['Yes', 'No'];
plugin.settings.buttons = ['Ok', 'Cancel'];

@@ -554,0 +555,0 @@ break;

168

examples/examples.js

@@ -5,3 +5,3 @@ $(document).ready(function() {

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
});

@@ -11,6 +11,5 @@

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong> has no dependencies other than <em>jQuery 1.5.2+</em> and works in all major' +
' browsers like<br>- Firefox<br>- Opera<br>- Safari<br>- Chrome<br>- Internet Explorer 6+', {
'type': 'error',
'title': 'Error'
new $.Zebra_Dialog('Use error messages to let the user know that an action has not completed successfully and show the reason why that happened.', {
type: 'error',
title: 'Error'
});

@@ -21,7 +20,5 @@ });

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong> is meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em>' +
' dialog boxes. <br><br> Can also be used as a notification widget - when configured to show no buttons and to close' +
' automatically - for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.', {
'type': 'warning',
'title': 'Warning'
new $.Zebra_Dialog('Show warning messages like this when you are about to perform a sensitive operation and you want to make sure that the user understands the implications.', {
type: 'warning',
title: 'Warning'
});

@@ -32,6 +29,5 @@ });

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong> can generate 5 types of dialog boxes: confirmation, information, ' +
' warning, error and question.<br><br>The appearance of the dialog boxes is easily customizable by changing the CSS file ', {
'type': 'question',
'title': 'Question'
new $.Zebra_Dialog('Show confirmation dialogs like this when you want the user\'s accept for non-critical actions.', {
type: 'question',
title: 'Question'
});

@@ -42,6 +38,5 @@ });

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong> dialog boxes can be positioned anywhere on the screen - not just in the middle!' +
'<br><br>By default, dialog boxes can be closed by pressing the ESC key or by clicking anywhere on the overlay.', {
'type': 'information',
'title': 'Information'
new $.Zebra_Dialog('Use information boxes to show information or help messages that the user requested.', {
type: 'information',
title: 'Information'
});

@@ -52,6 +47,5 @@ });

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong> is a small (6KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+)' +
' and highly configurable dialog box plugin for jQuery meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em> dialog boxes.', {
'type': 'confirmation',
'title': 'Confirmation'
new $.Zebra_Dialog('Use confirmation messages to let the user know that an action has completed successfully.', {
type: 'confirmation',
title: 'Confirmation'
});

@@ -62,7 +56,7 @@ });

e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': ['Yes', 'No', 'Help'],
'onClose': function(caption) {
new $.Zebra_Dialog('We can set as many buttons as we want and we handle the user\'s choice though the callback function attached to the <strong>onClose</strong> event.<br><br>See the next example to handle user\'s choice in a different way.', {
type: 'question',
title: 'Custom buttons',
buttons: ['Yes', 'No', 'Help'],
onClose: function(caption) {
alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');

@@ -73,58 +67,110 @@ }

$('#example31').on('click', function(e) {
$('#example4').on('click', function(e) {
e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': [
{caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
{caption: 'No', callback: function() { alert('"No" was clicked')}},
{caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
]
new $.Zebra_Dialog('We can set as many buttons as we want and we can handle the user\'s choice though the callback functions attached to the buttons.', {
type: 'question',
title: 'Custom buttons',
buttons: [
{caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
{caption: 'No', callback: function() { alert('"No" was clicked')}},
{caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
]
});
});
$('#example4').on('click', function(e) {
$('#example5_1').on('click', function(e) {
e.preventDefault();
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'title': 'Custom positioning',
'position': ['right - 20', 'top + 20']
new $.Zebra_Dialog('I am positioned in the <strong>top-left</strong> corner, 20&nbsp;pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'left + 20\', \'top + 20\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['left + 20', 'top + 20']
});
});
$('#example5').on('click', function(e) {
$('#example5_2').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'buttons': false,
'modal': false,
'position': ['right - 20', 'top + 20'],
'auto_close': 2000
new $.Zebra_Dialog('I am positioned in the <strong>top-right</strong> corner, 20&nbsp;pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'right - 20\', \'top + 20\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['right - 20', 'top + 20']
});
});
$('#example5_3').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('I am positioned in the <strong>bottom-right</strong> corner, 20&nbsp;pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'right - 20\', \'bottom - 20\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['right - 20', 'bottom - 20']
});
});
$('#example5_4').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('I am positioned in the <strong>bottom-left</strong> corner, 20&nbsp;pixels from the edges. Here\'s how it\'s done:<br><code>position: [\'left + 20\', \'bottom - 20\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['left + 20', 'bottom - 20']
});
});
$('#example5_5').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('I am positioned in the <strong>center</strong> of the screen. Here\'s how it\'s done:<br><code>position: [\'center\', \'center\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['center', 'center']
});
});
$('#example5_6').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('I am centered horizontally and 50&nbsp;pixels from the top edge. Here\'s how it\'s done:<br><code>position: [\'center\', \'top + 50\']</code>', {
title: 'Custom positioning',
width: 460,
position: ['center', 'top + 50']
});
});
$('#example6').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('I am a notification widget. No buttons, no overlay, I am positioned in the top-right corner and I stay on screen for 2 seconds.', {
buttons: false,
modal: false,
position: ['right - 20', 'top + 20'],
auto_close: 2000
});
});
$('#example7').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog({
source: {inline: $('#boxcontent').html()},
source: {
inline: $('#boxcontent').html()
},
width: 600,
title: 'Inline content'
title: 'Content loaded from an element on the page'
});
});
$('#example7').on('click', function(e) {
$('#example8').on('click', function(e) {
e.preventDefault();
$.Zebra_Dialog({
source: {'ajax': 'ajax.html'},
new $.Zebra_Dialog({
source: {
ajax: 'ajax.html'
},
width: 600,
title: 'External content loaded via AJAX'
title: 'Content loaded via AJAX'
});
});
$('#example71').on('click', function(e) {
$('#example9').on('click', function(e) {
e.preventDefault();
$.Zebra_Dialog({
source: {'iframe': {
'src': 'http://en.m.wikipedia.org/wiki/Dialog_box',
'height': 500
}},
new $.Zebra_Dialog({
source: {
iframe: {
src: 'http://en.m.wikipedia.org/wiki/Dialog_box',
height: 500
}
},
width: 800,

@@ -135,7 +181,7 @@ title: 'External content loaded in an iFrame'

$('#example8').on('click', function(e) {
$('#example10').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
'custom_class': 'myclass',
'title': 'Customizing the appearance'
custom_class: 'myclass',
title: 'Customizing the appearance'
});

@@ -142,0 +188,0 @@ });

2

package.json

@@ -15,3 +15,3 @@ {

"license": "LGPL-3.0",
"version": "1.5.0",
"version": "1.6.0",
"keywords": [

@@ -18,0 +18,0 @@ "jquery-plugin",

62

README.md
<img src="https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png" alt="zebrajs" align="right">
# Zebra_Dialog
# Zebra Dialog &nbsp;[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Zebra_Dialog%20-%20a%20small,%20compact%20and%20highly%20configurable%20jQuery%20plugin%20for%20creating%20responsive%20modal%20dialog%20boxes&url=https://github.com/stefangabos/Zebra_Dialog&via=stefangabos&hashtags=jquery,dialog,notifications,alert,modal,javascript)
*A small, compact and highly configurable jQuery plugin for creating responsive modal dialog boxes*
[![npm](https://img.shields.io/npm/v/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Total](https://img.shields.io/npm/dt/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Monthly](https://img.shields.io/npm/dm/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![License](https://img.shields.io/npm/l/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog)
[![npm](https://img.shields.io/npm/v/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Total](https://img.shields.io/npm/dt/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![Monthly](https://img.shields.io/npm/dm/zebra_dialog.svg)](https://www.npmjs.com/package/zebra_dialog) [![](https://data.jsdelivr.com/v1/package/npm/zebra_dialog/badge)](https://www.jsdelivr.com/package/npm/zebra_dialog) [![License](https://img.shields.io/npm/l/zebra_dialog.svg)](https://github.com/stefangabos/Zebra_Dialog/blob/master/LICENSE.md)
A modal window is a child window that requires users to interact with it before they can continue using the parent application. Modal windows are one of the most commonly used user interface elements and are used to command user awareness in order to communicate important information, or to alert of errors or warnings.
**Zebra_Dialog** is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) , and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert* and *confirmation* dialog boxes.
**Zebra Dialog** is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) , and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript *alert* and *confirmation* dialog boxes.
Can also be used as a notification widget (when configured to show no buttons and to close automatically) for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.
![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot.png)
[![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot.png)](https://stefangabos.github.io/Zebra_Dialog/index.html)
&nbsp;&nbsp;
![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot-flat.png)
[![Screenshot](https://raw.github.com/stefangabos/Zebra_Dialog/master/examples/screenshot-flat.png)](https://stefangabos.github.io/Zebra_Dialog/flat.html)
## Support the development of this project
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RKMCMRZB493LY)
## Features

@@ -34,3 +30,3 @@

- use callback functions to handle users' choice
- works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
- works in pretty much any browser (Chrome, Firefox, Safari, Edge, Opera, Internet Explorer 6+)

@@ -41,15 +37,13 @@ For the default theme the icons used for *confirmation*, *information*, *error* and *question* dialog boxes are made by [DryIcon](http://dryicons.com/free-icons/preview/aesthetica/) while the *warning* icon is made by [Function Design & Development Studio](http://wefunction.com/2008/07/function-free-icon-set/).

## Sponsors
## Demo
Cross browser/device testing is done with
See the [demos](https://stefangabos.github.io/Zebra_Dialog/flat.html)
[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)
## Requirements
Zebra_Dialog has no dependencies other than jQuery 1.7.0+
Zebra Dialog has no dependencies other than jQuery 1.7.0+
## Installation
Zebra_Dialog is available as a [npm package](https://www.npmjs.com/package/zebra_dialog). To install it use:
Zebra Dialog is available as a [npm package](https://www.npmjs.com/package/zebra_dialog). To install it use:

@@ -61,3 +55,3 @@ ```bash

Zebra_Dialog is also available as a [Bower package](http://bower.io/). To install it use:
Zebra Dialog is also available as a [Bower package](http://bower.io/). To install it use:

@@ -74,7 +68,7 @@ ```bash

```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.2.1.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.3.1.js"><\/script>')</script>
```
Load the Zebra_Dialog jQuery plugin:
Load the Zebra Dialog jQuery plugin:

@@ -85,6 +79,6 @@ ```html

Alternatively, you can load Zebra_Dialog from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_dialog) like this:
Alternatively, you can load Zebra Dialog from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_dialog) like this:
```html
<!-- for the most recent version -->
<script src="https://cdn.jsdelivr.net/npm/zebra_dialog/dist/zebra_dialog.min.js"></script>
<!-- for the most recent version, not recommended in production -->
<script src="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/zebra_dialog.min.js"></script>

@@ -107,6 +101,10 @@ <!-- for a specific version -->

<!-- for the most recent version of the "flat" theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/flat/zebra_dialog.min.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/flat/zebra_dialog.min.css">
<!-- for the most recent version of the "default" theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/default/zebra_dialog.min.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/default/zebra_dialog.min.css">

@@ -173,3 +171,3 @@ <!-- replacing "min" with "src" will serve you the non-compressed version -->

Use this for localization and for adding custom buttons.<br><br>
If set to <code>TRUE</code>, the default buttons will be used, depending on the type of the dialog box: <code>['Yes', 'No']</code> for <em>question</em> type and <code>['Ok']</code> for the other types of dialog boxes.<br><br>
If set to <code>TRUE</code>, the default buttons will be used, depending on the type of the dialog box: <code>['Ok', 'Cancel']</code> for <em>warning</em> and <em>question</em> and types, and <code>['Ok']</code> for the other types of dialog boxes.<br><br>
For custom buttons, use an array containing the captions of the buttons to display: <code>['My button 1', 'My button 2']</code>.<br><br>

@@ -368,3 +366,3 @@ Set to <code>FALSE</code> if you want no buttons.<br><br>

If you don't want an icon, set the <code>type</code> property to <code>FALSE</code>.<br><br>
By default, all types except <code>question</code> have a single button with the caption <em>Ok</em>; type <code>question</code> has two buttons, with the captions <em>Ok</em> and <em>Cancel</em> respectively.
By default, the <code>warning</code> and <code>question</code> types have two buttons with the captions <em>Ok</em> and <em>Cancel</em> respectively, while the other types have a single button with the caption <em>Ok</em>.
</td>

@@ -426,4 +424,10 @@ </tr>

## Demo
## Support the development of this project
See the [demos](http://stefangabos.github.io/Zebra_Dialog/flat.html)
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RKMCMRZB493LY)
## Sponsors
Cross browser/device testing is done with
[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)
license.txt
examples/examples.css

Sorry, the diff of this file is not supported yet

examples/flat.html

Sorry, the diff of this file is not supported yet

examples/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc