├── dist ├── css │ ├── materialize │ │ ├── icons.txt │ │ ├── error.png │ │ ├── prompt.png │ │ ├── question.png │ │ ├── spinner.gif │ │ ├── warning.png │ │ ├── information.png │ │ ├── confirmation.png │ │ ├── zebra_dialog.min.css │ │ ├── zebra_dialog.css │ │ └── zebra_dialog.scss │ ├── flat │ │ ├── error.png │ │ ├── prompt.png │ │ ├── question.png │ │ ├── spinner.gif │ │ ├── warning.png │ │ ├── information.png │ │ ├── confirmation.png │ │ ├── icons.txt │ │ ├── zebra_dialog.min.css │ │ ├── zebra_dialog.css │ │ └── zebra_dialog.scss │ └── classic │ │ ├── error.png │ │ ├── prompt.png │ │ ├── question.png │ │ ├── spinner.gif │ │ ├── warning.png │ │ ├── confirmation.png │ │ ├── information.png │ │ ├── zebra_dialog.min.css │ │ ├── zebra_dialog.css │ │ └── zebra_dialog.scss └── zebra_dialog.min.js ├── examples ├── favicon.ico ├── coffee_48.png ├── ajax.html ├── examples.css ├── examples.js ├── index.html └── flat.html ├── .github └── FUNDING.yml ├── LICENSE.md ├── CHANGELOG.md └── README.md /dist/css/materialize/icons.txt: -------------------------------------------------------------------------------- 1 | The icons were taken from https://material.io/tools/icons/?style=baseline -------------------------------------------------------------------------------- /examples/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/examples/favicon.ico -------------------------------------------------------------------------------- /dist/css/flat/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/error.png -------------------------------------------------------------------------------- /dist/css/flat/prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/prompt.png -------------------------------------------------------------------------------- /examples/coffee_48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/examples/coffee_48.png -------------------------------------------------------------------------------- /dist/css/classic/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/error.png -------------------------------------------------------------------------------- /dist/css/flat/question.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/question.png -------------------------------------------------------------------------------- /dist/css/flat/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/spinner.gif -------------------------------------------------------------------------------- /dist/css/flat/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/warning.png -------------------------------------------------------------------------------- /dist/css/classic/prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/prompt.png -------------------------------------------------------------------------------- /dist/css/classic/question.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/question.png -------------------------------------------------------------------------------- /dist/css/classic/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/spinner.gif -------------------------------------------------------------------------------- /dist/css/classic/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/warning.png -------------------------------------------------------------------------------- /dist/css/flat/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/information.png -------------------------------------------------------------------------------- /dist/css/flat/confirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/flat/confirmation.png -------------------------------------------------------------------------------- /dist/css/materialize/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/error.png -------------------------------------------------------------------------------- /dist/css/materialize/prompt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/prompt.png -------------------------------------------------------------------------------- /dist/css/classic/confirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/confirmation.png -------------------------------------------------------------------------------- /dist/css/classic/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/classic/information.png -------------------------------------------------------------------------------- /dist/css/materialize/question.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/question.png -------------------------------------------------------------------------------- /dist/css/materialize/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/spinner.gif -------------------------------------------------------------------------------- /dist/css/materialize/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/warning.png -------------------------------------------------------------------------------- /dist/css/flat/icons.txt: -------------------------------------------------------------------------------- 1 | The icons were taken from http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free -------------------------------------------------------------------------------- /dist/css/materialize/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/information.png -------------------------------------------------------------------------------- /dist/css/materialize/confirmation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stefangabos/Zebra_Dialog/HEAD/dist/css/materialize/confirmation.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: stefangabos # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /examples/ajax.html: -------------------------------------------------------------------------------- 1 |

Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis 2 | leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia 3 | in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et 4 | auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

5 | 6 |

Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis 7 | leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia 8 | in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et 9 | auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

10 | 11 |

Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis 12 | leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia 13 | in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et 14 | auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.

-------------------------------------------------------------------------------- /examples/examples.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Tahoma, Helvetica, Arial, sans-serif; 3 | } 4 | 5 | .top { 6 | border-bottom: 1px solid #eee; 7 | display: block; 8 | margin-bottom: 33px; 9 | } 10 | 11 | .top a { 12 | background: #FFF; 13 | padding-right: 10px; 14 | position: relative; 15 | top: 8px; 16 | } 17 | 18 | .syntaxhighlighter { 19 | padding: .5em 0; 20 | } 21 | 22 | blockquote.bg-warning.Zebra_Pin { 23 | border-bottom: 1px solid #ccc; 24 | box-shadow: 0 12px 6px -6px rgba(0, 0, 0, .1); 25 | transition: box-shadow .25s linear; 26 | } 27 | 28 | .myclass .ZebraDialog_Title { 29 | background: #330066; 30 | } 31 | 32 | body.materialize .myclass .ZebraDialog_Title { 33 | border-top-left-radius: 5px; 34 | border-top-right-radius: 5px; 35 | color: #FFF; 36 | font-size: 19px; 37 | } 38 | 39 | .myclass .ZebraDialog_Body { 40 | background-image: url('coffee_48.png'); 41 | font-size: 21px; 42 | } 43 | 44 | body.flat .myclass .ZebraDialog_Title { 45 | background: #DEDEDE; 46 | border-bottom: 1px solid #222; 47 | } 48 | 49 | body.flat .myclass .ZebraDialog_Body { 50 | background-position: 40px 28px; 51 | } 52 | 53 | .ZebraDialog_iFrame .ZebraDialog_Body { 54 | padding: 0; 55 | } 56 | 57 | body.flat .ZebraDialog_iFrame .ZebraDialog_Body, 58 | body.materialize .ZebraDialog_iFrame .ZebraDialog_Body { 59 | margin-bottom: 0; 60 | } 61 | -------------------------------------------------------------------------------- /dist/css/flat/zebra_dialog.min.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll{position:fixed;left:0;top:0;height:100%}.ZebraDialog *{-moz-box-sizing:content-box!important;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{margin:0;padding:0;text-align:left}.ZebraDialog{max-width:100%;z-index:1001}@media(max-width:574px){.ZebraDialog{width:100%}}.ZebraDialog_Draggable{cursor:grab}.ZebraDialog_Confirmation .ZebraDialog_Body{background-image:url(confirmation.png)}.ZebraDialog_Error .ZebraDialog_Body{background-image:url(error.png)}.ZebraDialog_Information .ZebraDialog_Body{background-image:url(information.png)}.ZebraDialog_Question .ZebraDialog_Body{background-image:url(question.png)}.ZebraDialog_Warning .ZebraDialog_Body{background-image:url(warning.png)}.ZebraDialog_Prompt .ZebraDialog_Body{background-image:url(prompt.png)}.ZebraDialog_Buttons.ZebraDialog_Buttons_Centered{text-align:center}a.ZebraDialog_Close{background:rgba(0,0,0,0);font-family:arial,sans-serif;font-size:21px;font-weight:700;margin-top:-15px;position:absolute;text-decoration:none;top:50%}.ZebraDialog_NoTitle .ZebraDialog_Close{top:0;margin-top:0}.ZebraDialogBackdrop{background:#666;height:100%;z-index:1000;width:100%}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{font-family:Helvetica,Tahoma,Arial,sans-serif;font-size:14px;line-height:1.4}.ZebraDialog_Spinner{background:url(spinner.gif) center center no-repeat;height:32px}.ZebraDialog_Spinner.ZebraDialog_iFrame{left:50%;margin-left:-16px;margin-top:-16px;position:absolute;top:50%;width:32px;z-index:2}.ZebraDialog{background:#fff;border:1px solid #dedede}.ZebraDialog.ZebraDialog_NotModal{box-shadow:0 0 10px #ccc}.ZebraDialog_Title{position:relative;border-bottom:1px solid #f0f0f0;color:#000;font-size:16px;font-weight:700;padding:12px 15px}.ZebraDialog_Body{overflow:auto;-webkit-overflow-scrolling:touch;color:#44484a;margin:10px;padding:20px}.ZebraDialog_Icon .ZebraDialog_Body{background-repeat:no-repeat;background-position:25px 20px;padding-left:124px;min-height:64px}.ZebraDialog_Prompt_Input{width:100%;-moz-box-sizing:border-box!important;-webkit-box-sizing:border-box!important;box-sizing:border-box!important;resize:none;padding:8px;margin:10px 0 0;border:1px solid #cbcbcb;color:#44484a;border-radius:3px}.ZebraDialog_Buttons{text-align:right;padding:10px 5px 10px 10px}.ZebraDialog_Buttons a{display:inline-block;white-space:nowrap;zoom:1;*display:inline;background:#516270;color:#fff;font-weight:700;margin-right:5px!important;min-width:60px;padding:10px 15px;text-align:center;text-decoration:none}.ZebraDialog_Buttons a:hover{background:#224467;color:#fff}.ZebraDialog_Close{color:#888;right:10px}.ZebraDialog_Close:focus,.ZebraDialog_Close:hover{color:#000} -------------------------------------------------------------------------------- /dist/css/materialize/zebra_dialog.min.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll{position:fixed;left:0;top:0;height:100%}.ZebraDialog *{-moz-box-sizing:content-box!important;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{margin:0;padding:0;text-align:left}.ZebraDialog{max-width:100%;z-index:1001}@media(max-width:574px){.ZebraDialog{width:100%}}.ZebraDialog_Draggable{cursor:grab}.ZebraDialog_Confirmation .ZebraDialog_Body{background-image:url(confirmation.png)}.ZebraDialog_Error .ZebraDialog_Body{background-image:url(error.png)}.ZebraDialog_Information .ZebraDialog_Body{background-image:url(information.png)}.ZebraDialog_Question .ZebraDialog_Body{background-image:url(question.png)}.ZebraDialog_Warning .ZebraDialog_Body{background-image:url(warning.png)}.ZebraDialog_Prompt .ZebraDialog_Body{background-image:url(prompt.png)}.ZebraDialog_Buttons.ZebraDialog_Buttons_Centered{text-align:center}a.ZebraDialog_Close{background:rgba(0,0,0,0);font-family:arial,sans-serif;font-size:21px;font-weight:700;position:absolute;text-decoration:none;top:50%}.ZebraDialog_NoTitle .ZebraDialog_Close{top:0}.ZebraDialogBackdrop{background:#666;height:100%;z-index:1000;width:100%}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{font-family:Helvetica,Tahoma,Arial,sans-serif;font-size:15px;line-height:1.4}.ZebraDialog_Spinner{background:url(spinner.gif) center center no-repeat;height:32px}.ZebraDialog_Spinner.ZebraDialog_iFrame{left:50%;margin-left:-16px;margin-top:-16px;position:absolute;top:50%;width:32px;z-index:2}.ZebraDialog{background:#fff;box-shadow:0 -2px 25px 0 rgba(0,0,0,.15),0 13px 25px 0 rgba(0,0,0,.3);border-radius:5px}.ZebraDialog_Title{position:relative;border-bottom:1px solid #f0f0f0;color:#000;font-size:17px;font-weight:700;padding:10px}.ZebraDialog_Body{overflow:auto;-webkit-overflow-scrolling:touch;color:#44484a;margin:10px;padding:20px}.ZebraDialog_Icon .ZebraDialog_Body{background-repeat:no-repeat;background-position:25px 20px;padding-left:108px;min-height:48px}.ZebraDialog_Prompt_Input{width:100%;-moz-box-sizing:border-box!important;-webkit-box-sizing:border-box!important;box-sizing:border-box!important;resize:none;padding:8px;margin:10px 0 0;border:1px solid #ababab;color:#44484a;border-radius:5px}.ZebraDialog_Buttons{text-align:right;padding:10px 0 10px 10px}.ZebraDialog_Buttons a{display:inline-block;white-space:nowrap;zoom:1;*display:inline;background:rgba(0,0,0,0);border-radius:5px;color:#37a0f5;font-size:16px;font-weight:700;margin-right:10px!important;min-width:60px;padding:9px 16px 7px;text-align:center;text-decoration:none;text-transform:uppercase}.ZebraDialog_Buttons a:focus,.ZebraDialog_Buttons a:hover,a.ZebraDialog_Close:focus,a.ZebraDialog_Close:hover{background:#f0f0f0;color:#37a0f5}a.ZebraDialog_Close{border-radius:15px;color:#ddd;padding:1px 10px;right:10px;margin-top:-15px}.ZebraDialog_NoTitle .ZebraDialog_Close{margin-top:2px;right:2px} -------------------------------------------------------------------------------- /dist/css/classic/zebra_dialog.min.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll{position:fixed;left:0;top:0;height:100%}.ZebraDialog *{-moz-box-sizing:content-box!important;-webkit-box-sizing:content-box!important;box-sizing:content-box!important}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{margin:0;padding:0;text-align:left}.ZebraDialog{max-width:100%;z-index:1001}@media(max-width:574px){.ZebraDialog{width:100%}}.ZebraDialog_Draggable{cursor:grab}.ZebraDialog_Confirmation .ZebraDialog_Body{background-image:url(confirmation.png)}.ZebraDialog_Error .ZebraDialog_Body{background-image:url(error.png)}.ZebraDialog_Information .ZebraDialog_Body{background-image:url(information.png)}.ZebraDialog_Question .ZebraDialog_Body{background-image:url(question.png)}.ZebraDialog_Warning .ZebraDialog_Body{background-image:url(warning.png)}.ZebraDialog_Prompt .ZebraDialog_Body{background-image:url(prompt.png)}.ZebraDialog_Buttons.ZebraDialog_Buttons_Centered{text-align:center}a.ZebraDialog_Close{background:rgba(0,0,0,0);font-family:arial,sans-serif;font-size:21px;font-weight:700;margin-top:-15px;position:absolute;text-decoration:none;top:50%}.ZebraDialog_NoTitle .ZebraDialog_Close{top:0;margin-top:0}.ZebraDialogBackdrop{background:#666;height:100%;z-index:1000;width:100%}.ZebraDialog,.ZebraDialog_Body,.ZebraDialog_Buttons a,.ZebraDialog_Title{font-family:Helvetica,Tahoma,Arial,sans-serif;font-size:14px;line-height:1.4}.ZebraDialog_Spinner{background:url(spinner.gif) center center no-repeat;height:32px}.ZebraDialog_Spinner.ZebraDialog_iFrame{left:50%;margin-left:-16px;margin-top:-16px;position:absolute;top:50%;width:32px;z-index:2}.ZebraDialog{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:#e7edef;border:7px solid #13252f}.ZebraDialog_Title{position:relative;background:#444;border-bottom:1px solid #000;color:#f6f5f5;font-size:16px;font-weight:700;padding:12px 15px;text-shadow:0 -1px 0 rgba(0,0,0,.25)}.ZebraDialog_Body{overflow:auto;-webkit-overflow-scrolling:touch;color:#44484a;margin:10px;padding:20px}.ZebraDialog_NoTitle .ZebraDialog_Body{border-bottom:none}.ZebraDialog_Icon .ZebraDialog_Body{background-repeat:no-repeat;background-position:25px 20px;padding-left:108px;min-height:48px}.ZebraDialog_Prompt_Input{width:100%;-moz-box-sizing:border-box!important;-webkit-box-sizing:border-box!important;box-sizing:border-box!important;resize:none;padding:8px;margin:10px 0 0;border:1px solid #ababab;color:#44484a;border-radius:3px}.ZebraDialog_Buttons{text-align:right;border-top:2px groove #fff;padding:10px 5px 10px 10px}.ZebraDialog_Buttons a{display:inline-block;white-space:nowrap;zoom:1;*display:inline;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;color:#fff;font-weight:700;margin-right:5px!important;min-width:60px;padding:10px 15px;text-align:center;text-decoration:none;text-shadow:1px 0 2px #222;background-color:#006dcc;*background-color:#04c;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(to bottom,#08c,#04c);background-repeat:repeat-x;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.ZebraDialog_Buttons a:hover{background:#224467;color:#fff}.ZebraDialog_Close{color:#e7edef;right:10px}.ZebraDialog_Close:focus,.ZebraDialog_Close:hover{color:#e7edef}.ZebraDialog_NoTitle .ZebraDialog_Close{color:#666} -------------------------------------------------------------------------------- /dist/css/flat/zebra_dialog.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100% 6 | } 7 | .ZebraDialog * { 8 | -moz-box-sizing: content-box!important; 9 | -webkit-box-sizing: content-box!important; 10 | box-sizing: content-box!important 11 | } 12 | .ZebraDialog, 13 | .ZebraDialog_Body, 14 | .ZebraDialog_Buttons a, 15 | .ZebraDialog_Title { 16 | margin: 0; 17 | padding: 0; 18 | text-align: left 19 | } 20 | .ZebraDialog { 21 | max-width: 100%; 22 | z-index: 1001 23 | } 24 | @media (max-width:574px) { 25 | .ZebraDialog { 26 | width: 100% 27 | } 28 | } 29 | .ZebraDialog_Draggable { 30 | cursor: grab 31 | } 32 | .ZebraDialog_Confirmation .ZebraDialog_Body { 33 | background-image: url(confirmation.png) 34 | } 35 | .ZebraDialog_Error .ZebraDialog_Body { 36 | background-image: url(error.png) 37 | } 38 | .ZebraDialog_Information .ZebraDialog_Body { 39 | background-image: url(information.png) 40 | } 41 | .ZebraDialog_Question .ZebraDialog_Body { 42 | background-image: url(question.png) 43 | } 44 | .ZebraDialog_Warning .ZebraDialog_Body { 45 | background-image: url(warning.png) 46 | } 47 | .ZebraDialog_Prompt .ZebraDialog_Body { 48 | background-image: url(prompt.png) 49 | } 50 | .ZebraDialog_Buttons.ZebraDialog_Buttons_Centered { 51 | text-align: center 52 | } 53 | a.ZebraDialog_Close { 54 | background: 0 0; 55 | font-family: arial,sans-serif; 56 | font-size: 21px; 57 | font-weight: 700; 58 | margin-top: -15px; 59 | position: absolute; 60 | text-decoration: none; 61 | top: 50% 62 | } 63 | .ZebraDialog_NoTitle .ZebraDialog_Close { 64 | top: 0; 65 | margin-top: 0 66 | } 67 | .ZebraDialogBackdrop { 68 | background: #666; 69 | height: 100%; 70 | z-index: 1000; 71 | width: 100% 72 | } 73 | .ZebraDialog, 74 | .ZebraDialog_Body, 75 | .ZebraDialog_Buttons a, 76 | .ZebraDialog_Title { 77 | font-family: Helvetica,Tahoma,Arial,sans-serif; 78 | font-size: 14px; 79 | line-height: 1.4 80 | } 81 | .ZebraDialog_Spinner { 82 | background: url(spinner.gif) center center no-repeat; 83 | height: 32px 84 | } 85 | .ZebraDialog_Spinner.ZebraDialog_iFrame { 86 | left: 50%; 87 | margin-left: -16px; 88 | margin-top: -16px; 89 | position: absolute; 90 | top: 50%; 91 | width: 32px; 92 | z-index: 2 93 | } 94 | .ZebraDialog { 95 | background: #fff; 96 | border: 1px solid #dedede 97 | } 98 | .ZebraDialog.ZebraDialog_NotModal { 99 | box-shadow: 0 0 10px #ccc 100 | } 101 | .ZebraDialog_Title { 102 | position: relative; 103 | border-bottom: 1px solid #f0f0f0; 104 | color: #000; 105 | font-size: 16px; 106 | font-weight: 700; 107 | padding: 12px 15px 108 | } 109 | .ZebraDialog_Body { 110 | overflow: auto; 111 | -webkit-overflow-scrolling: touch; 112 | color: #44484a; 113 | margin: 10px; 114 | padding: 20px 115 | } 116 | .ZebraDialog_Icon .ZebraDialog_Body { 117 | background-repeat: no-repeat; 118 | background-position: 25px 20px; 119 | padding-left: 124px; 120 | min-height: 64px 121 | } 122 | .ZebraDialog_Prompt_Input { 123 | width: 100%; 124 | -moz-box-sizing: border-box!important; 125 | -webkit-box-sizing: border-box!important; 126 | box-sizing: border-box!important; 127 | resize: none; 128 | padding: 8px; 129 | margin: 10px 0 0; 130 | border: 1px solid #cbcbcb; 131 | color: #44484a; 132 | border-radius: 3px 133 | } 134 | .ZebraDialog_Buttons { 135 | text-align: right; 136 | padding: 10px 5px 10px 10px 137 | } 138 | .ZebraDialog_Buttons a { 139 | display: inline-block; 140 | white-space: nowrap; 141 | zoom: 1; 142 | *display: inline; 143 | background: #516270; 144 | color: #fff; 145 | font-weight: 700; 146 | margin-right: 5px!important; 147 | min-width: 60px; 148 | padding: 10px 15px; 149 | text-align: center; 150 | text-decoration: none 151 | } 152 | .ZebraDialog_Buttons a:hover { 153 | background: #224467; 154 | color: #fff 155 | } 156 | .ZebraDialog_Close { 157 | color: #888; 158 | right: 10px 159 | } 160 | .ZebraDialog_Close:focus, 161 | .ZebraDialog_Close:hover { 162 | color: #000 163 | } -------------------------------------------------------------------------------- /dist/css/materialize/zebra_dialog.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100% 6 | } 7 | .ZebraDialog * { 8 | -moz-box-sizing: content-box!important; 9 | -webkit-box-sizing: content-box!important; 10 | box-sizing: content-box!important 11 | } 12 | .ZebraDialog, 13 | .ZebraDialog_Body, 14 | .ZebraDialog_Buttons a, 15 | .ZebraDialog_Title { 16 | margin: 0; 17 | padding: 0; 18 | text-align: left 19 | } 20 | .ZebraDialog { 21 | max-width: 100%; 22 | z-index: 1001 23 | } 24 | @media (max-width:574px) { 25 | .ZebraDialog { 26 | width: 100% 27 | } 28 | } 29 | .ZebraDialog_Draggable { 30 | cursor: grab 31 | } 32 | .ZebraDialog_Confirmation .ZebraDialog_Body { 33 | background-image: url(confirmation.png) 34 | } 35 | .ZebraDialog_Error .ZebraDialog_Body { 36 | background-image: url(error.png) 37 | } 38 | .ZebraDialog_Information .ZebraDialog_Body { 39 | background-image: url(information.png) 40 | } 41 | .ZebraDialog_Question .ZebraDialog_Body { 42 | background-image: url(question.png) 43 | } 44 | .ZebraDialog_Warning .ZebraDialog_Body { 45 | background-image: url(warning.png) 46 | } 47 | .ZebraDialog_Prompt .ZebraDialog_Body { 48 | background-image: url(prompt.png) 49 | } 50 | .ZebraDialog_Buttons.ZebraDialog_Buttons_Centered { 51 | text-align: center 52 | } 53 | a.ZebraDialog_Close { 54 | background: 0 0; 55 | font-family: arial,sans-serif; 56 | font-size: 21px; 57 | font-weight: 700; 58 | position: absolute; 59 | text-decoration: none; 60 | top: 50% 61 | } 62 | .ZebraDialog_NoTitle .ZebraDialog_Close { 63 | top: 0 64 | } 65 | .ZebraDialogBackdrop { 66 | background: #666; 67 | height: 100%; 68 | z-index: 1000; 69 | width: 100% 70 | } 71 | .ZebraDialog, 72 | .ZebraDialog_Body, 73 | .ZebraDialog_Buttons a, 74 | .ZebraDialog_Title { 75 | font-family: Helvetica,Tahoma,Arial,sans-serif; 76 | font-size: 15px; 77 | line-height: 1.4 78 | } 79 | .ZebraDialog_Spinner { 80 | background: url(spinner.gif) center center no-repeat; 81 | height: 32px 82 | } 83 | .ZebraDialog_Spinner.ZebraDialog_iFrame { 84 | left: 50%; 85 | margin-left: -16px; 86 | margin-top: -16px; 87 | position: absolute; 88 | top: 50%; 89 | width: 32px; 90 | z-index: 2 91 | } 92 | .ZebraDialog { 93 | background: #fff; 94 | box-shadow: 0 -2px 25px 0 rgba(0,0,0,.15),0 13px 25px 0 rgba(0,0,0,.3); 95 | border-radius: 5px 96 | } 97 | .ZebraDialog_Title { 98 | position: relative; 99 | border-bottom: 1px solid #f0f0f0; 100 | color: #000; 101 | font-size: 17px; 102 | font-weight: 700; 103 | padding: 10px 104 | } 105 | .ZebraDialog_Body { 106 | overflow: auto; 107 | -webkit-overflow-scrolling: touch; 108 | color: #44484a; 109 | margin: 10px; 110 | padding: 20px 111 | } 112 | .ZebraDialog_Icon .ZebraDialog_Body { 113 | background-repeat: no-repeat; 114 | background-position: 25px 20px; 115 | padding-left: 108px; 116 | min-height: 48px 117 | } 118 | .ZebraDialog_Prompt_Input { 119 | width: 100%; 120 | -moz-box-sizing: border-box!important; 121 | -webkit-box-sizing: border-box!important; 122 | box-sizing: border-box!important; 123 | resize: none; 124 | padding: 8px; 125 | margin: 10px 0 0; 126 | border: 1px solid #ababab; 127 | color: #44484a; 128 | border-radius: 5px 129 | } 130 | .ZebraDialog_Buttons { 131 | text-align: right; 132 | padding: 10px 0 10px 10px 133 | } 134 | .ZebraDialog_Buttons a { 135 | display: inline-block; 136 | white-space: nowrap; 137 | zoom: 1; 138 | *display: inline; 139 | background: 0 0; 140 | border-radius: 5px; 141 | color: #37a0f5; 142 | font-size: 16px; 143 | font-weight: 700; 144 | margin-right: 10px!important; 145 | min-width: 60px; 146 | padding: 9px 16px 7px; 147 | text-align: center; 148 | text-decoration: none; 149 | text-transform: uppercase 150 | } 151 | .ZebraDialog_Buttons a:focus, 152 | .ZebraDialog_Buttons a:hover, 153 | a.ZebraDialog_Close:focus, 154 | a.ZebraDialog_Close:hover { 155 | background: #f0f0f0; 156 | color: #37a0f5 157 | } 158 | a.ZebraDialog_Close { 159 | border-radius: 15px; 160 | color: #ddd; 161 | padding: 1px 10px; 162 | right: 10px; 163 | margin-top: -15px 164 | } 165 | .ZebraDialog_NoTitle .ZebraDialog_Close { 166 | margin-top: 2px; 167 | right: 2px 168 | } -------------------------------------------------------------------------------- /dist/css/flat/zebra_dialog.scss: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100%; 6 | } 7 | 8 | .ZebraDialogBackdrop { 9 | z-index: 1000; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .ZebraDialog * { 15 | -moz-box-sizing: content-box !important; 16 | -webkit-box-sizing: content-box !important; 17 | box-sizing: content-box !important; 18 | } 19 | 20 | .ZebraDialog, 21 | .ZebraDialog_Title, 22 | .ZebraDialog_Body, 23 | .ZebraDialog_Buttons a { 24 | margin: 0; 25 | padding: 0; 26 | text-align: left; 27 | } 28 | 29 | .ZebraDialog { 30 | max-width: 100%; 31 | z-index: 1001; 32 | @media (max-width: 574px) { 33 | width: 100%; 34 | } 35 | 36 | } 37 | 38 | .ZebraDialog_Title { 39 | position: relative; 40 | } 41 | 42 | .ZebraDialog_Draggable { 43 | cursor: grab; 44 | } 45 | 46 | .ZebraDialog_Body { 47 | overflow: auto; 48 | -webkit-overflow-scrolling: touch; 49 | } 50 | 51 | .ZebraDialog_Confirmation .ZebraDialog_Body { 52 | background-image: url(confirmation.png); 53 | } 54 | 55 | .ZebraDialog_Error .ZebraDialog_Body { 56 | background-image: url(error.png); 57 | } 58 | 59 | .ZebraDialog_Information .ZebraDialog_Body { 60 | background-image: url(information.png); 61 | } 62 | 63 | .ZebraDialog_Question .ZebraDialog_Body { 64 | background-image: url(question.png); 65 | } 66 | 67 | .ZebraDialog_Warning .ZebraDialog_Body { 68 | background-image: url(warning.png); 69 | } 70 | 71 | .ZebraDialog_Prompt .ZebraDialog_Body { 72 | background-image: url(prompt.png); 73 | } 74 | 75 | .ZebraDialog_Prompt_Input { 76 | width: 100%; 77 | -moz-box-sizing: border-box !important; 78 | -webkit-box-sizing: border-box !important; 79 | box-sizing: border-box !important; 80 | resize: none; 81 | } 82 | 83 | .ZebraDialog_Buttons { 84 | text-align: right; 85 | 86 | a { 87 | display: inline-block; 88 | white-space: nowrap; 89 | zoom: 1; 90 | *display: inline; 91 | } 92 | &.ZebraDialog_Buttons_Centered { 93 | text-align: center; 94 | } 95 | } 96 | 97 | a.ZebraDialog_Close { 98 | background: transparent; 99 | font-family: arial, sans-serif; 100 | font-size: 21px; 101 | font-weight: bold; 102 | margin-top: -15px; 103 | position: absolute; 104 | text-decoration: none; 105 | top: 50%; 106 | } 107 | 108 | .ZebraDialog_NoTitle .ZebraDialog_Close { 109 | top: 0; 110 | margin-top: 0; 111 | } 112 | 113 | .ZebraDialogBackdrop { 114 | background: #666; 115 | height: 100%; 116 | z-index: 1000; 117 | width: 100%; 118 | } 119 | 120 | .ZebraDialog, 121 | .ZebraDialog_Title, 122 | .ZebraDialog_Body, 123 | .ZebraDialog_Buttons a { 124 | font-family: Helvetica, Tahoma, Arial, sans-serif; 125 | font-size: 14px; 126 | line-height: 1.4; 127 | } 128 | 129 | .ZebraDialog_Spinner { 130 | background: url(spinner.gif) no-repeat center center; 131 | height: 32px; 132 | &.ZebraDialog_iFrame { 133 | left: 50%; 134 | margin-left: -16px; 135 | margin-top: -16px; 136 | position: absolute; 137 | top: 50%; 138 | width: 32px; 139 | z-index: 2; 140 | } 141 | } 142 | 143 | .ZebraDialog { 144 | background: #FFF; 145 | border: 1px solid #dedede; 146 | &.ZebraDialog_NotModal { 147 | box-shadow: 0 0 10px #CCC; 148 | } 149 | } 150 | 151 | .ZebraDialog_Title { 152 | border-bottom: 1px solid #F0F0F0; 153 | color: #000; 154 | font-size: 16px; 155 | font-weight: bold; 156 | padding: 12px 15px; 157 | } 158 | 159 | .ZebraDialog_Body { 160 | color: #44484A; 161 | margin: 10px; 162 | padding: 20px; 163 | } 164 | 165 | .ZebraDialog_Icon .ZebraDialog_Body { 166 | background-repeat: no-repeat; 167 | background-position: 25px 20px; 168 | padding-left: 124px; 169 | min-height: 64px; 170 | } 171 | 172 | .ZebraDialog_Prompt_Input { 173 | padding: 8px; 174 | margin: 10px 0 0; 175 | border: 1px solid #cbcbcb; 176 | color: #44484A; 177 | border-radius: 3px; 178 | } 179 | 180 | .ZebraDialog_Buttons { 181 | padding: 10px 5px 10px 10px; 182 | 183 | a { 184 | background: #516270; 185 | color: #FFF; 186 | font-weight: bold; 187 | margin-right: 5px !important; 188 | min-width: 60px; 189 | padding: 10px 15px; 190 | text-align: center; 191 | text-decoration: none; 192 | 193 | &:hover { 194 | background: #224467; 195 | color: #FFF; 196 | } 197 | } 198 | } 199 | 200 | .ZebraDialog_Close { 201 | color: #888; 202 | right: 10px; 203 | 204 | &:hover, 205 | &:focus { 206 | color: #000; 207 | } 208 | } 209 | -------------------------------------------------------------------------------- /dist/css/materialize/zebra_dialog.scss: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100%; 6 | } 7 | 8 | .ZebraDialogBackdrop { 9 | z-index: 1000; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .ZebraDialog * { 15 | -moz-box-sizing: content-box !important; 16 | -webkit-box-sizing: content-box !important; 17 | box-sizing: content-box !important; 18 | } 19 | 20 | .ZebraDialog, 21 | .ZebraDialog_Title, 22 | .ZebraDialog_Body, 23 | .ZebraDialog_Buttons a { 24 | margin: 0; 25 | padding: 0; 26 | text-align: left; 27 | } 28 | 29 | .ZebraDialog { 30 | max-width: 100%; 31 | z-index: 1001; 32 | @media (max-width: 574px) { 33 | width: 100%; 34 | } 35 | 36 | } 37 | 38 | .ZebraDialog_Title { 39 | position: relative; 40 | } 41 | 42 | .ZebraDialog_Draggable { 43 | cursor: grab; 44 | } 45 | 46 | .ZebraDialog_Body { 47 | overflow: auto; 48 | -webkit-overflow-scrolling: touch; 49 | } 50 | 51 | .ZebraDialog_Confirmation .ZebraDialog_Body { 52 | background-image: url(confirmation.png); 53 | } 54 | 55 | .ZebraDialog_Error .ZebraDialog_Body { 56 | background-image: url(error.png); 57 | } 58 | 59 | .ZebraDialog_Information .ZebraDialog_Body { 60 | background-image: url(information.png); 61 | } 62 | 63 | .ZebraDialog_Question .ZebraDialog_Body { 64 | background-image: url(question.png); 65 | } 66 | 67 | .ZebraDialog_Warning .ZebraDialog_Body { 68 | background-image: url(warning.png); 69 | } 70 | 71 | .ZebraDialog_Prompt .ZebraDialog_Body { 72 | background-image: url(prompt.png); 73 | } 74 | 75 | .ZebraDialog_Prompt_Input { 76 | width: 100%; 77 | -moz-box-sizing: border-box !important; 78 | -webkit-box-sizing: border-box !important; 79 | box-sizing: border-box !important; 80 | resize: none; 81 | } 82 | 83 | .ZebraDialog_Buttons { 84 | text-align: right; 85 | 86 | a { 87 | display: inline-block; 88 | white-space: nowrap; 89 | zoom: 1; 90 | *display: inline; 91 | } 92 | &.ZebraDialog_Buttons_Centered { 93 | text-align: center; 94 | } 95 | } 96 | 97 | a.ZebraDialog_Close { 98 | background: transparent; 99 | font-family: arial, sans-serif; 100 | font-size: 21px; 101 | font-weight: bold; 102 | margin-top: -15px; 103 | position: absolute; 104 | text-decoration: none; 105 | top: 50%; 106 | } 107 | 108 | .ZebraDialog_NoTitle .ZebraDialog_Close { 109 | top: 0; 110 | margin-top: 0; 111 | } 112 | 113 | .ZebraDialogBackdrop { 114 | background: #666; 115 | height: 100%; 116 | z-index: 1000; 117 | width: 100%; 118 | } 119 | 120 | .ZebraDialog, 121 | .ZebraDialog_Title, 122 | .ZebraDialog_Body, 123 | .ZebraDialog_Buttons a { 124 | font-family: Helvetica, Tahoma, Arial, sans-serif; 125 | font-size: 15px; 126 | line-height: 1.4; 127 | } 128 | 129 | .ZebraDialog_Spinner { 130 | background: url(spinner.gif) no-repeat center center; 131 | height: 32px; 132 | &.ZebraDialog_iFrame { 133 | left: 50%; 134 | margin-left: -16px; 135 | margin-top: -16px; 136 | position: absolute; 137 | top: 50%; 138 | width: 32px; 139 | z-index: 2; 140 | } 141 | } 142 | 143 | .ZebraDialog { 144 | background: #FFF; 145 | box-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3); 146 | border-radius: 5px; 147 | } 148 | 149 | .ZebraDialog_Title { 150 | border-bottom: 1px solid #F0F0F0; 151 | color: #000; 152 | font-size: 17px; 153 | font-weight: bold; 154 | padding: 10px; 155 | } 156 | 157 | .ZebraDialog_Body { 158 | color: #44484A; 159 | margin: 10px; 160 | padding: 20px; 161 | } 162 | 163 | .ZebraDialog_Icon .ZebraDialog_Body { 164 | background-repeat: no-repeat; 165 | background-position: 25px 20px; 166 | padding-left: 108px; 167 | min-height: 48px; 168 | } 169 | 170 | .ZebraDialog_Prompt_Input { 171 | padding: 8px; 172 | margin: 10px 0 0; 173 | border: 1px solid #ababab; 174 | color: #44484A; 175 | border-radius: 5px; 176 | } 177 | 178 | .ZebraDialog_Buttons { 179 | padding: 10px 0 10px 10px; 180 | 181 | a { 182 | background: transparent; 183 | border-radius: 5px; 184 | color: #37A0F5; 185 | font-size: 16px; 186 | font-weight: bold; 187 | margin-right: 10px !important; 188 | min-width: 60px; 189 | padding: 9px 16px 7px; 190 | text-align: center; 191 | text-decoration: none; 192 | text-transform: uppercase; 193 | } 194 | } 195 | 196 | .ZebraDialog_Buttons a:hover, 197 | .ZebraDialog_Buttons a:focus, 198 | a.ZebraDialog_Close:hover, 199 | a.ZebraDialog_Close:focus { 200 | background: #f0f0f0; 201 | color: #37A0F5; 202 | } 203 | 204 | a.ZebraDialog_Close { 205 | border-radius: 15px; 206 | color: #DDD; 207 | padding: 1px 10px; 208 | right: 10px; 209 | margin-top: -15px; 210 | } 211 | 212 | .ZebraDialog_NoTitle .ZebraDialog_Close { 213 | margin-top: 2px; 214 | right: 2px; 215 | } -------------------------------------------------------------------------------- /dist/css/classic/zebra_dialog.css: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100% 6 | } 7 | .ZebraDialog * { 8 | -moz-box-sizing: content-box!important; 9 | -webkit-box-sizing: content-box!important; 10 | box-sizing: content-box!important 11 | } 12 | .ZebraDialog, 13 | .ZebraDialog_Body, 14 | .ZebraDialog_Buttons a, 15 | .ZebraDialog_Title { 16 | margin: 0; 17 | padding: 0; 18 | text-align: left 19 | } 20 | .ZebraDialog { 21 | max-width: 100%; 22 | z-index: 1001 23 | } 24 | @media (max-width:574px) { 25 | .ZebraDialog { 26 | width: 100% 27 | } 28 | } 29 | .ZebraDialog_Draggable { 30 | cursor: grab 31 | } 32 | .ZebraDialog_Confirmation .ZebraDialog_Body { 33 | background-image: url(confirmation.png) 34 | } 35 | .ZebraDialog_Error .ZebraDialog_Body { 36 | background-image: url(error.png) 37 | } 38 | .ZebraDialog_Information .ZebraDialog_Body { 39 | background-image: url(information.png) 40 | } 41 | .ZebraDialog_Question .ZebraDialog_Body { 42 | background-image: url(question.png) 43 | } 44 | .ZebraDialog_Warning .ZebraDialog_Body { 45 | background-image: url(warning.png) 46 | } 47 | .ZebraDialog_Prompt .ZebraDialog_Body { 48 | background-image: url(prompt.png) 49 | } 50 | .ZebraDialog_Buttons.ZebraDialog_Buttons_Centered { 51 | text-align: center 52 | } 53 | a.ZebraDialog_Close { 54 | background: 0 0; 55 | font-family: arial,sans-serif; 56 | font-size: 21px; 57 | font-weight: 700; 58 | margin-top: -15px; 59 | position: absolute; 60 | text-decoration: none; 61 | top: 50% 62 | } 63 | .ZebraDialog_NoTitle .ZebraDialog_Close { 64 | top: 0; 65 | margin-top: 0 66 | } 67 | .ZebraDialogBackdrop { 68 | background: #666; 69 | height: 100%; 70 | z-index: 1000; 71 | width: 100% 72 | } 73 | .ZebraDialog, 74 | .ZebraDialog_Body, 75 | .ZebraDialog_Buttons a, 76 | .ZebraDialog_Title { 77 | font-family: Helvetica,Tahoma,Arial,sans-serif; 78 | font-size: 14px; 79 | line-height: 1.4 80 | } 81 | .ZebraDialog_Spinner { 82 | background: url(spinner.gif) center center no-repeat; 83 | height: 32px 84 | } 85 | .ZebraDialog_Spinner.ZebraDialog_iFrame { 86 | left: 50%; 87 | margin-left: -16px; 88 | margin-top: -16px; 89 | position: absolute; 90 | top: 50%; 91 | width: 32px; 92 | z-index: 2 93 | } 94 | .ZebraDialog { 95 | -webkit-border-radius: 10px; 96 | -moz-border-radius: 10px; 97 | border-radius: 10px; 98 | background: #e7edef; 99 | border: 7px solid #13252f 100 | } 101 | .ZebraDialog_Title { 102 | position: relative; 103 | background: #444; 104 | border-bottom: 1px solid #000; 105 | color: #f6f5f5; 106 | font-size: 16px; 107 | font-weight: 700; 108 | padding: 12px 15px; 109 | text-shadow: 0 -1px 0 rgba(0,0,0,.25) 110 | } 111 | .ZebraDialog_Body { 112 | overflow: auto; 113 | -webkit-overflow-scrolling: touch; 114 | color: #44484a; 115 | margin: 10px; 116 | padding: 20px 117 | } 118 | .ZebraDialog_NoTitle .ZebraDialog_Body { 119 | border-bottom: none 120 | } 121 | .ZebraDialog_Icon .ZebraDialog_Body { 122 | background-repeat: no-repeat; 123 | background-position: 25px 20px; 124 | padding-left: 108px; 125 | min-height: 48px 126 | } 127 | .ZebraDialog_Prompt_Input { 128 | width: 100%; 129 | -moz-box-sizing: border-box!important; 130 | -webkit-box-sizing: border-box!important; 131 | box-sizing: border-box!important; 132 | resize: none; 133 | padding: 8px; 134 | margin: 10px 0 0; 135 | border: 1px solid #ababab; 136 | color: #44484a; 137 | border-radius: 3px 138 | } 139 | .ZebraDialog_Buttons { 140 | text-align: right; 141 | border-top: 2px groove #fff; 142 | padding: 10px 5px 10px 10px 143 | } 144 | .ZebraDialog_Buttons a { 145 | display: inline-block; 146 | white-space: nowrap; 147 | zoom: 1; 148 | *display: inline; 149 | -webkit-border-radius: 6px; 150 | -moz-border-radius: 6px; 151 | border-radius: 6px; 152 | color: #fff; 153 | font-weight: 700; 154 | margin-right: 5px!important; 155 | min-width: 60px; 156 | padding: 10px 15px; 157 | text-align: center; 158 | text-decoration: none; 159 | text-shadow: 1px 0 2px #222; 160 | background-color: #006dcc; 161 | *background-color: #04c; 162 | background-image: -moz-linear-gradient(top,#08c,#04c); 163 | background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c)); 164 | background-image: -webkit-linear-gradient(top,#08c,#04c); 165 | background-image: -o-linear-gradient(top,#08c,#04c); 166 | background-image: linear-gradient(to bottom,#08c,#04c); 167 | background-repeat: repeat-x; 168 | border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25); 169 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0); 170 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false) 171 | } 172 | .ZebraDialog_Buttons a:hover { 173 | background: #224467; 174 | color: #fff 175 | } 176 | .ZebraDialog_Close { 177 | color: #e7edef; 178 | right: 10px 179 | } 180 | .ZebraDialog_Close:focus, 181 | .ZebraDialog_Close:hover { 182 | color: #e7edef 183 | } 184 | .ZebraDialog_NoTitle .ZebraDialog_Close { 185 | color: #666 186 | } -------------------------------------------------------------------------------- /dist/css/classic/zebra_dialog.scss: -------------------------------------------------------------------------------- 1 | .ZebraDialog_NoScroll { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | height: 100%; 6 | } 7 | 8 | .ZebraDialogBackdrop { 9 | z-index: 1000; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | .ZebraDialog * { 15 | -moz-box-sizing: content-box !important; 16 | -webkit-box-sizing: content-box !important; 17 | box-sizing: content-box !important; 18 | } 19 | 20 | .ZebraDialog, 21 | .ZebraDialog_Title, 22 | .ZebraDialog_Body, 23 | .ZebraDialog_Buttons a { 24 | margin: 0; 25 | padding: 0; 26 | text-align: left; 27 | } 28 | 29 | .ZebraDialog { 30 | max-width: 100%; 31 | z-index: 1001; 32 | @media (max-width: 574px) { 33 | width: 100%; 34 | } 35 | 36 | } 37 | 38 | .ZebraDialog_Title { 39 | position: relative; 40 | } 41 | 42 | .ZebraDialog_Draggable { 43 | cursor: grab; 44 | } 45 | 46 | .ZebraDialog_Body { 47 | overflow: auto; 48 | -webkit-overflow-scrolling: touch; 49 | } 50 | 51 | .ZebraDialog_Confirmation .ZebraDialog_Body { 52 | background-image: url(confirmation.png); 53 | } 54 | 55 | .ZebraDialog_Error .ZebraDialog_Body { 56 | background-image: url(error.png); 57 | } 58 | 59 | .ZebraDialog_Information .ZebraDialog_Body { 60 | background-image: url(information.png); 61 | } 62 | 63 | .ZebraDialog_Question .ZebraDialog_Body { 64 | background-image: url(question.png); 65 | } 66 | 67 | .ZebraDialog_Warning .ZebraDialog_Body { 68 | background-image: url(warning.png); 69 | } 70 | 71 | .ZebraDialog_Prompt .ZebraDialog_Body { 72 | background-image: url(prompt.png); 73 | } 74 | 75 | .ZebraDialog_Prompt_Input { 76 | width: 100%; 77 | -moz-box-sizing: border-box !important; 78 | -webkit-box-sizing: border-box !important; 79 | box-sizing: border-box !important; 80 | resize: none; 81 | } 82 | 83 | .ZebraDialog_Buttons { 84 | text-align: right; 85 | 86 | a { 87 | display: inline-block; 88 | white-space: nowrap; 89 | zoom: 1; 90 | *display: inline; 91 | } 92 | &.ZebraDialog_Buttons_Centered { 93 | text-align: center; 94 | } 95 | } 96 | 97 | a.ZebraDialog_Close { 98 | background: transparent; 99 | font-family: arial, sans-serif; 100 | font-size: 21px; 101 | font-weight: bold; 102 | margin-top: -15px; 103 | position: absolute; 104 | text-decoration: none; 105 | top: 50%; 106 | } 107 | 108 | .ZebraDialog_NoTitle .ZebraDialog_Close { 109 | top: 0; 110 | margin-top: 0; 111 | } 112 | 113 | .ZebraDialogBackdrop { 114 | background: #666; 115 | height: 100%; 116 | z-index: 1000; 117 | width: 100%; 118 | } 119 | 120 | .ZebraDialog, 121 | .ZebraDialog_Title, 122 | .ZebraDialog_Body, 123 | .ZebraDialog_Buttons a { 124 | font-family: Helvetica, Tahoma, Arial, sans-serif; 125 | font-size: 14px; 126 | line-height: 1.4; 127 | } 128 | 129 | .ZebraDialog_Spinner { 130 | background: url(spinner.gif) no-repeat center center; 131 | height: 32px; 132 | &.ZebraDialog_iFrame { 133 | left: 50%; 134 | margin-left: -16px; 135 | margin-top: -16px; 136 | position: absolute; 137 | top: 50%; 138 | width: 32px; 139 | z-index: 2; 140 | } 141 | } 142 | 143 | .ZebraDialog { 144 | -webkit-border-radius: 10px; 145 | -moz-border-radius: 10px; 146 | border-radius: 10px; 147 | background: #E7EDEF; 148 | border: 7px solid #13252F; 149 | } 150 | 151 | .ZebraDialog_Title { 152 | background: #444; 153 | border-bottom: 1px solid #000; 154 | color: #F6F5F5; 155 | font-size: 16px; 156 | font-weight: bold; 157 | padding: 12px 15px; 158 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 159 | } 160 | 161 | .ZebraDialog_Body { 162 | color: #44484A; 163 | margin: 10px; 164 | padding: 20px; 165 | } 166 | 167 | .ZebraDialog_NoTitle .ZebraDialog_Body { 168 | border-bottom: none; 169 | } 170 | 171 | .ZebraDialog_Icon .ZebraDialog_Body { 172 | background-repeat: no-repeat; 173 | background-position: 25px 20px; 174 | padding-left: 108px; 175 | min-height: 48px; 176 | } 177 | 178 | .ZebraDialog_Prompt_Input { 179 | padding: 8px; 180 | margin: 10px 0 0; 181 | border: 1px solid #ababab; 182 | color: #44484A; 183 | border-radius: 3px; 184 | } 185 | 186 | .ZebraDialog_Buttons { 187 | border-top: 2px groove #FFF; 188 | padding: 10px 5px 10px 10px; 189 | 190 | a { 191 | -webkit-border-radius: 6px; 192 | -moz-border-radius: 6px; 193 | border-radius: 6px; 194 | color: #FFF; 195 | font-weight: bold; 196 | margin-right: 5px !important; 197 | min-width: 60px; 198 | padding: 10px 15px; 199 | text-align: center; 200 | text-decoration: none; 201 | text-shadow: 1px 0px 2px #222; 202 | 203 | /* taken from Twitter Bootstrap */ 204 | background-color: #006DCC; 205 | *background-color: #0044CC; 206 | background-image: -moz-linear-gradient(top, #0088CC, #0044CC); 207 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC)); 208 | background-image: -webkit-linear-gradient(top, #0088CC, #0044CC); 209 | background-image: -o-linear-gradient(top, #0088CC, #0044CC); 210 | background-image: linear-gradient(to bottom, #0088CC, #0044CC); 211 | background-repeat: repeat-x; 212 | border-color: #0044CC #0044CC #002A80; 213 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 214 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0); 215 | filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); 216 | 217 | &:hover { 218 | background: #224467; 219 | color: #FFF; 220 | } 221 | } 222 | } 223 | 224 | .ZebraDialog_Close { 225 | color: #E7EDEF; 226 | right: 10px; 227 | 228 | &:hover, 229 | &:focus { 230 | color: #E7EDEF; 231 | } 232 | } 233 | 234 | .ZebraDialog_NoTitle .ZebraDialog_Close { 235 | color: #666; 236 | } 237 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### GNU LESSER GENERAL PUBLIC LICENSE 2 | 3 | Version 3, 29 June 2007 4 | 5 | Copyright (C) 2007 Free Software Foundation, Inc. 6 | 7 | 8 | Everyone is permitted to copy and distribute verbatim copies of this 9 | license document, but changing it is not allowed. 10 | 11 | This version of the GNU Lesser General Public License incorporates the 12 | terms and conditions of version 3 of the GNU General Public License, 13 | supplemented by the additional permissions listed below. 14 | 15 | #### 0. Additional Definitions. 16 | 17 | As used herein, "this License" refers to version 3 of the GNU Lesser 18 | General Public License, and the "GNU GPL" refers to version 3 of the 19 | GNU General Public License. 20 | 21 | "The Library" refers to a covered work governed by this License, other 22 | than an Application or a Combined Work as defined below. 23 | 24 | An "Application" is any work that makes use of an interface provided 25 | by the Library, but which is not otherwise based on the Library. 26 | Defining a subclass of a class defined by the Library is deemed a mode 27 | of using an interface provided by the Library. 28 | 29 | A "Combined Work" is a work produced by combining or linking an 30 | Application with the Library. The particular version of the Library 31 | with which the Combined Work was made is also called the "Linked 32 | Version". 33 | 34 | The "Minimal Corresponding Source" for a Combined Work means the 35 | Corresponding Source for the Combined Work, excluding any source code 36 | for portions of the Combined Work that, considered in isolation, are 37 | based on the Application, and not on the Linked Version. 38 | 39 | The "Corresponding Application Code" for a Combined Work means the 40 | object code and/or source code for the Application, including any data 41 | and utility programs needed for reproducing the Combined Work from the 42 | Application, but excluding the System Libraries of the Combined Work. 43 | 44 | #### 1. Exception to Section 3 of the GNU GPL. 45 | 46 | You may convey a covered work under sections 3 and 4 of this License 47 | without being bound by section 3 of the GNU GPL. 48 | 49 | #### 2. Conveying Modified Versions. 50 | 51 | If you modify a copy of the Library, and, in your modifications, a 52 | facility refers to a function or data to be supplied by an Application 53 | that uses the facility (other than as an argument passed when the 54 | facility is invoked), then you may convey a copy of the modified 55 | version: 56 | 57 | - a) under this License, provided that you make a good faith effort 58 | to ensure that, in the event an Application does not supply the 59 | function or data, the facility still operates, and performs 60 | whatever part of its purpose remains meaningful, or 61 | - b) under the GNU GPL, with none of the additional permissions of 62 | this License applicable to that copy. 63 | 64 | #### 3. Object Code Incorporating Material from Library Header Files. 65 | 66 | The object code form of an Application may incorporate material from a 67 | header file that is part of the Library. You may convey such object 68 | code under terms of your choice, provided that, if the incorporated 69 | material is not limited to numerical parameters, data structure 70 | layouts and accessors, or small macros, inline functions and templates 71 | (ten or fewer lines in length), you do both of the following: 72 | 73 | - a) Give prominent notice with each copy of the object code that 74 | the Library is used in it and that the Library and its use are 75 | covered by this License. 76 | - b) Accompany the object code with a copy of the GNU GPL and this 77 | license document. 78 | 79 | #### 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, taken 82 | together, effectively do not restrict modification of the portions of 83 | the Library contained in the Combined Work and reverse engineering for 84 | debugging such modifications, if you also do each of the following: 85 | 86 | - a) Give prominent notice with each copy of the Combined Work that 87 | the Library is used in it and that the Library and its use are 88 | covered by this License. 89 | - b) Accompany the Combined Work with a copy of the GNU GPL and this 90 | license document. 91 | - c) For a Combined Work that displays copyright notices during 92 | execution, include the copyright notice for the Library among 93 | these notices, as well as a reference directing the user to the 94 | copies of the GNU GPL and this license document. 95 | - d) Do one of the following: 96 | - 0) Convey the Minimal Corresponding Source under the terms of 97 | this License, and the Corresponding Application Code in a form 98 | suitable for, and under terms that permit, the user to 99 | recombine or relink the Application with a modified version of 100 | the Linked Version to produce a modified Combined Work, in the 101 | manner specified by section 6 of the GNU GPL for conveying 102 | Corresponding Source. 103 | - 1) Use a suitable shared library mechanism for linking with 104 | the Library. A suitable mechanism is one that (a) uses at run 105 | time a copy of the Library already present on the user's 106 | computer system, and (b) will operate properly with a modified 107 | version of the Library that is interface-compatible with the 108 | Linked Version. 109 | - e) Provide Installation Information, but only if you would 110 | otherwise be required to provide such information under section 6 111 | of the GNU GPL, and only to the extent that such information is 112 | necessary to install and execute a modified version of the 113 | Combined Work produced by recombining or relinking the Application 114 | with a modified version of the Linked Version. (If you use option 115 | 4d0, the Installation Information must accompany the Minimal 116 | Corresponding Source and Corresponding Application Code. If you 117 | use option 4d1, you must provide the Installation Information in 118 | the manner specified by section 6 of the GNU GPL for conveying 119 | Corresponding Source.) 120 | 121 | #### 5. Combined Libraries. 122 | 123 | You may place library facilities that are a work based on the Library 124 | side by side in a single library together with other library 125 | facilities that are not Applications and are not covered by this 126 | License, and convey such a combined library under terms of your 127 | choice, if you do both of the following: 128 | 129 | - a) Accompany the combined library with a copy of the same work 130 | based on the Library, uncombined with any other library 131 | facilities, conveyed under the terms of this License. 132 | - b) Give prominent notice with the combined library that part of it 133 | is a work based on the Library, and explaining where to find the 134 | accompanying uncombined form of the same work. 135 | 136 | #### 6. Revised Versions of the GNU Lesser General Public License. 137 | 138 | The Free Software Foundation may publish revised and/or new versions 139 | of the GNU Lesser General Public License from time to time. Such new 140 | versions will be similar in spirit to the present version, but may 141 | differ in detail to address new problems or concerns. 142 | 143 | Each version is given a distinguishing version number. If the Library 144 | as you received it specifies that a certain numbered version of the 145 | GNU Lesser General Public License "or any later version" applies to 146 | it, you have the option of following the terms and conditions either 147 | of that published version or of any later version published by the 148 | Free Software Foundation. If the Library as you received it does not 149 | specify a version number of the GNU Lesser General Public License, you 150 | may choose any version of the GNU Lesser General Public License ever 151 | published by the Free Software Foundation. 152 | 153 | If the Library as you received it specifies that a proxy can decide 154 | whether future versions of the GNU Lesser General Public License shall 155 | apply, that proxy's public statement of acceptance of any version is 156 | permanent authorization for you to choose that version for the 157 | Library. -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## version 3.1.0 (October 22, 2024) 2 | 3 | - dialog boxes are now draggable by default; see the newly added `draggable` property; see [#38](https://github.com/stefangabos/Zebra_Dialog/issues/38) and thanks [LukeSavefrogs](https://github.com/LukeSavefrogs) for suggesting this A LONG TIME AGO! 4 | - added the `onOpen` event which triggers **after** the dialog box is made visible; see [#39](https://github.com/stefangabos/Zebra_Dialog/issues/39); thanks [LukeSavefrogs](https://github.com/LukeSavefrogs) for suggesting this A LONG TIME AGO! 5 | - added the `onBeforeClose` event which triggers **before** the dialog is hidden; useful for validating input prompts and not closing the dialog box in case the input is not valid 6 | - added `placeholder` property to be used with `prompt` type dialog boxes 7 | - added `prompt_rows` which when set to a value greater than `1` will turn the `input` element in a `prompt` dialog box to a `textarea` 8 | - fixed bug where page scrolling was not disabled when opening modal dialog boxes even though `disable_page_scrolling` was set to `true` by default 9 | 10 | ## version 3.0.7 (May 12, 2024) 11 | 12 | - minor maintenance release 13 | 14 | ## version 3.0.6 (April 22, 2024) 15 | 16 | - minor maintenance release 17 | 18 | ## version 3.0.5 (August 18, 2020) 19 | 20 | - fixed bugs when working with iFrames 21 | 22 | ## version 3.0.4 (August 17, 2020) 23 | 24 | - fixed bug where the `disable_page_scrolling` property introduced in `3.0.0` had an undesired effect on pages where there was no scroll 25 | 26 | ## version 3.0.3 (July 19, 2020) 27 | 28 | - SASS files are now available in the `dist` folder 29 | - fixed broken example for overlapping dialogs 30 | 31 | ## version 3.0.2 (April 26, 2020) 32 | 33 | - minor release which only adds screenshots to the examples 34 | 35 | ## version 3.0.1 (March 31, 2020) 36 | 37 | - fixed [#32](https://github.com/stefangabos/Zebra_Dialog/issues/32) where the `center_buttons` property was not centering buttons; thanks [LukeSavefrogs](https://github.com/LukeSavefrogs)! 38 | 39 | ## version 3.0.0 (September 03, 2019) 40 | 41 | - page scrolling behind an open dialog box is now disabled by default 42 | - added `margin` property to prevent the dialog box from touching the viewport's limits when stretched 100% horizontally and/or vertically 43 | - added `max_width` property which, together with the existing `max_height` property, can now be specified as percentage 44 | - added the `default_value` property to be used for `prompt` type dialog boxes 45 | - `width` and `height` properties can now be specified as percentages, too 46 | - `custom_class` is now also added to the overlay, not just to the dialog box 47 | - the word `center` can also be used when specifying vertical position (alongside `middle`) 48 | - when using iFrames, the width and height is now automatically computed to fit those of the dialog box; additionally, now a spinner is also shown while the iFrame content is loading 49 | - the library now automatically does backdrop management when opening multiple modal dialog boxes 50 | - dropped IE6 support 51 | - fixed bug where the positioning of the dialog box was incorrect it had borders 52 | - removed the `backdrop_container` property 53 | - minor tweaks to all the templates 54 | 55 | ## version 2.1.0 (June 03, 2019) 56 | 57 | - added [prompt](https://stefangabos.github.io/Zebra_Dialog/flat.html#handling-input) dialog box type; thanks to [Sebi Popa](https://github.com/sebipopa)! 58 | - added `height` property for setting custom heights to dialog boxes 59 | - added `update` method for adjusting the dialog box's position when content is changed dynamically, at run-time 60 | - the overlay can now have a different parent than the `body` element, via the newly added `overlay_container` property 61 | 62 | ## version 2.0.0 (August 01, 2018) 63 | 64 | - added a new "auto_focus_button" property for indicating the button to place the focus on when a dialog box is first shown 65 | - simplified dialogs' HTML markup and all the classes indicating various states/setups of the dialog box are now added to the main container 66 | - some of the alignments done previously from JavaScript are now done from CSS - but still working in IE6 :) 67 | - completely rewritten the CSS for the themes and we're now using [clean-css](https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api) to optimize CSS output, resulting in a reduction of 0.5KB for the flat theme and 1.8KB for the classic theme 68 | - added a new *materialize* theme, inspired by Google Material Design 69 | 70 | ## version 1.6.0 (July 10, 2018) 71 | 72 | - "warning" dialog boxes now have "Yes" and "No" buttons instead of just the "Ok" button 73 | - changed the labels for the buttons on "confirmation" dialog boxes from "Yes" and "No" to "Ok" and "Cancel" 74 | - revamped example pages 75 | 76 | ## version 1.5.0 (July 05, 2018) 77 | 78 | - 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)! 79 | - fixed [#18](https://github.com/stefangabos/Zebra_Dialog/issues/18) where the plugin was not working in IE8 80 | - custom classes can now be added to buttons; this fixes [#15](https://github.com/stefangabos/Zebra_Dialog/issues/15) 81 | - added version number as a public property - useful to find out the version number even if all you have is the minified source code; see [#13](https://github.com/stefangabos/Zebra_Dialog/issues/13) 82 | 83 | ## version 1.4.1 (October 13, 2017) 84 | 85 | - fixed bug where dialog box height could exceed viewport height; see [#8](https://github.com/stefangabos/Zebra_Dialog/issues/8) 86 | - fixed scrolling on iPhone; see [#9](https://github.com/stefangabos/Zebra_Dialog/issues/9) 87 | 88 | ## version 1.4.0 (June 04, 2017) 89 | 90 | - performance improvements and source code tweaks 91 | - new folder structure 92 | - the home of the library is now exclusively on GitHub 93 | - files required in the build process are not included anymore when installing via npm nor when downloading from GitHub 94 | 95 | ## version 1.3.12 (January 26, 2016) 96 | 97 | - the library is now available as an [npm package](https://www.npmjs.com/package/zebra_dialog) 98 | 99 | ## version 1.3.9 (January 21, 2016) 100 | 101 | - added missing preloader.gif file to the "flat" theme; thanks to **Juan** for reporting; 102 | - replaced all instances of jQuery with $, for consistency and for making it easier to use with jQuery.noConflict(); thanks to **Julio** for suggesting; 103 | - fixes and additions to the bowser.json file, for better integration with [Bower](http://bower.io/) 104 | - examples now use jQuery version 1.12.0 105 | - dropped support for jQuery's deprectated official plugins repository 106 | 107 | ## version 1.3.8 (December 20, 2013) 108 | 109 | - fixed a bug where setting the "type" attribute to FALSE would not remove the left padding of the dialog box; thanks to **Laurent** for reporting 110 | - added "use strict" statement 111 | - added integration with [Grunt](http://gruntjs.com/) 112 | - the library is now available as a [Bower](http://bower.io/) package 113 | 114 | ## version 1.3.7 (November 26, 2013) 115 | 116 | - added a new "flat" theme 117 | 118 | ## version 1.3.6 (October 16, 2013) 119 | 120 | - fixed a bug where custom buttons were showing up in reversed order; 121 | - fixed a bug where, since the previous release, you'd have to explicitly return TRUE from a callback function attached to a custom button, in order for the dialog box to close; 122 | - thanks to **store88** for spotting both of the above! 123 | 124 | ## version 1.3.5 (September 08, 2013) 125 | 126 | - dialog boxes can now be kept open on button click; previously there was no way of keeping a dialog box from closing when a button was clicked; now, returning FALSE from the callback will do just that; 127 | 128 | ## version 1.3.4 (August 18, 2013) 129 | 130 | - added a new "center_buttons" property which when set to TRUE will instruct the script to center any available buttons instead of floating them to the right; 131 | - added a new "show_close_button" property which is set to TRUE by default and which displays the little "x" button in the top-right of the dialog box; 132 | - fixed a few issues in order to keep [JSHint](http://www.jshint.com/) (reasonably) happy; 133 | - slightly increased performance due to optimal management of event handlers; 134 | - fixed an issue where some things that should've been done in CSS were done in JavaScript; 135 | 136 | ## version 1.3.3 (May 29, 2013) 137 | 138 | - The z-index value for the overlay and the dialog box can now be set from CSS. Previously these were set in the JavaScript code and would require hacking the source code in order to change them; thanks **Israel Sato** 139 | 140 | ## version 1.3.2 (May 26, 2013) 141 | 142 | - fixed a bug where if the "reposition_speed" property was > 0 and the browser window was manually resized, the animations for repositioning the window would queue up and slow down the process to almost a complete halt; 143 | - changed the name of the "animation_speed" property to "animation_speed_hide" and added a new "animation_speed_show" used to set the speed by which the dialog box will fade in when appearing; 144 | 145 | ## version 1.3.1 (May 06, 2013) 146 | 147 | - fixed a bug where the dialog box was not looking 100% as expected if the page it was used on had the "box-sizing" CSS property set to "border-box", which is the default for some widely-used CSS frameworks like [Twitter Bootstrap](http://twitter.github.io/bootstrap/) and [Foundation](http://foundation.zurb.com/). Read more about it at [http://paulirish.com/2012/box-sizing-border-box-ftw/](http://paulirish.com/2012/box-sizing-border-box-ftw/) 148 | 149 | ## version 1.3 (April 08, 2013) 150 | 151 | - external content can now easily be loaded into the dialog box via AJAX, or using an iFrame, or an inline element, by using the newly added "source" property; when passing an inline element, it will be copied together with any attached events - useful for passing, for example, a complete form with attached events; thanks to **tom**; 152 | - the dialog box will use an animation when repositioning due to a browser window resize; the animation's speed is set by the newly added "reposition_speed" property; 153 | - the plugin is now available on [GitHub](https://github.com/stefangabos/Zebra_Dialog)! 154 | 155 | ## version 1.2.2 (February 09, 2013) 156 | 157 | - added a new "max_height" property; when setting it to something to other than "0", the content in the dialog box will be scrolled if it's height exceeds the given value; 158 | - new layout; 159 | 160 | ## version 1.2.1 (January 28, 2013) 161 | 162 | - fixed an issue due to which the plugin was not working with jQuery 1.9.0; 163 | 164 | ## version 1.2 (April 07, 2012) 165 | 166 | - when used as a notification widget, the notification can now be closed before the timer runs out by clicking on it; thanks to **Ovidiu Mihalcea** for suggesting; 167 | - callback functions can now be attached to custom buttons; credit goes to **Matt**! 168 | - added an example on how to add custom icons 169 | 170 | ## version 1.1.1 (September 24, 2011) 171 | 172 | - fixed a bug where the script would sometimes "forget" to clear the semi-transparent overlay; thanks to **Jack Everson** for reporting; 173 | 174 | ## version 1.1 (August 18, 2011) 175 | 176 | - the last button of the dialog box will now have the focus once the dialog box is open. previously, for any dialog boxes other than notifications, if the user pressed the ENTER key, it re-triggered the event and more dialog boxes were shown one on top of the other; thanks to **Yasir** for reporting; 177 | - it is now possible to add a custom class to the dialog box; this makes it easy to switch between styles at run-time; thanks to **Ed** for suggesting; 178 | - fixed a bug where the message's text color was inherited; now it is set from the CSS file; 179 | - examples are now also available in the downloadable package; 180 | 181 | ## version 1.0 (June 25, 2011) 182 | 183 | - initial release 184 | -------------------------------------------------------------------------------- /dist/zebra_dialog.min.js: -------------------------------------------------------------------------------- 1 | !function(k){"use strict";k.Zebra_Dialog=function(){var f,_,h={animation_speed_hide:250,animation_speed_show:0,auto_close:!(this.version="3.1.0"),auto_focus_button:!0,backdrop_close:!0,backdrop_opacity:".9",buttons:!0,center_buttons:!1,custom_class:!1,default_value:"",disable_page_scrolling:!0,draggable:!0,height:0,keyboard:!0,margin:0,max_height:0,max_width:450,message:"",modal:!0,placeholder:"",position:"center",prompt_rows:1,reposition_speed:500,show_close_button:!0,source:!1,title:"",type:"information",vcenter_short_message:!0,width:0,onOpen:null,onBeforeClose:null,onClose:null},y=this,D={},v=!1,Z=!1,w=function(){var t,e=k(window).width(),o=k(window).height(),s=y.dialog.outerWidth(),i=y.dialog.outerHeight(),a=e<768,n=0,l=0;y.dialog_left=undefined,y.dialog_top=undefined,t={left:n=(t=(y.settings.margin+"").match(/^([0-9]+)(\%)?$/))&&(undefined!==t[2]?(n=parseInt(e*parseInt(t[1],10)/100,10),l=parseInt(o*parseInt(t[1],10)/100,10)):n=l=parseInt(t[1],10),isNaN(n))?l=0:n,top:l,right:e-n-s,bottom:o-l-i,center:(e-s)/2,middle:(o-i)/2},k.isArray(y.settings.position)&&2===y.settings.position.length&&"string"==typeof y.settings.position[0]&&y.settings.position[0].match(/^(left|right|center)[\s0-9\+\-]*$/)&&"string"==typeof y.settings.position[1]&&y.settings.position[1].match(/^(top|bottom|middle|center)[\s0-9\+\-]*$/)&&(y.settings.position[0]=y.settings.position[0].toLowerCase(),y.settings.position[1]=y.settings.position[1].toLowerCase(),"center"===y.settings.position[1]&&(y.settings.position[1]="middle"),k.each(t,function(t,e){for(var o,s,i=0;i<2;i++)(o=(s=a?y.settings.position[i].replace(/[0-9\+\-\s]/g,""):y.settings.position[i]).replace(t,e))!==s&&(0===i?y.dialog_left=r(o):y.dialog_top=r(o))})),undefined!==y.dialog_left&&undefined!==y.dialog_top||(y.dialog_left=t.center,y.dialog_top=t.middle),y.dialog_top",{"class":"ZebraDialogBackdrop"+(y.settings.custom_class?" "+y.settings.custom_class:"")}).css({position:"fixed",left:0,top:0,opacity:y.settings.backdrop_opacity+""}),0").css({visibility:"hidden",overflow:"scroll",msOverflowStyle:"scrollbar"}).appendTo(k("body")),r=k("
").appendTo(l),u=l.outerWidth()-r.outerWidth(),l.remove(),r.remove(),u),top:-1*k(window).scrollTop()}).addClass("ZebraDialog_NoScroll"),y.dialog=k("
",{"class":"ZebraDialog"+(y.settings.custom_class?" "+y.settings.custom_class:"")+(y.settings.modal?"":" ZebraDialog_NotModal")+(!1!==T()?" ZebraDialog_Icon ZebraDialog_"+T():"")}).css({position:"fixed",left:0,top:0,visibility:"hidden"}),0",{"class":"ZebraDialog_Title"}).html(y.settings.title).appendTo(y.dialog):y.dialog.addClass("ZebraDialog_NoTitle"),undefined!==y.settings.source.iframe&&(y.settings.vcenter_short_message=!1),y.body=k("
",{"class":"ZebraDialog_Body"}),"prompt"===y.settings.type&&(1===parseInt(y.settings.prompt_rows,10)?y.settings.message+='':y.settings.message+='"),y.settings.vcenter_short_message?k("
").html(y.settings.message).appendTo(y.body):y.body.html(y.settings.message),"prompt"===y.settings.type&&(y.settings.message=k(".ZebraDialog_Prompt_Input",y.body),k(".ZebraDialog_Prompt_Input",y.body).on("keypress",function(t){13!==t.keyCode||k(this).is("textarea")&&!t.shiftKey||(v?v.trigger("click"):y.close(!0,this.value))})),y.settings.source&&"object"==typeof y.settings.source)for(n in o=y.settings.vcenter_short_message?k("div:first",y.body):y.body,y.settings.source)switch(n){case"ajax":t="string"==typeof y.settings.source[n]?{url:y.settings.source[n]}:y.settings.source[n],i=k("
").attr("class","ZebraDialog_Spinner").appendTo(o),t.success=function(t){i.remove(),o.append(t),w(!1)},k.ajax(t);break;case"iframe":t=k.extend({width:"100%",height:"100%",marginheight:"0",marginwidth:"0",frameborder:"0"},"string"==typeof y.settings.source[n]?{src:y.settings.source[n]}:y.settings.source[n]),y.iframe=k("