├── LICENSE ├── README.md └── jquery.dialogOptions.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jason Day 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | jQuery UI Dialog Options v1.0 3 | ================= 4 | 5 | Additional options/functionality for jQuery UI Dialog. 6 | 7 | New Options: 8 | * clickOut: true // closes dialog when clicked outside 9 | * responsive: true // fluid width & height based on viewport 10 | * showTitleBar: true // hide titlebar when false 11 | * showCloseButton: true // hide close button when false 12 | 13 | Added functionality: 14 | * add & remove dialogClass to .ui-widget-overlay for scoping styles 15 | * patch for: http://bugs.jqueryui.com/ticket/4671 - fixed in UI v1.10 16 | 17 | 18 | Demo: 19 | http://jsfiddle.net/jasonday/nWcFR/ 20 | 21 | 22 | Changelog: 23 | 24 | 1/22/2014 - Initial commit 25 | -------------------------------------------------------------------------------- /jquery.dialogOptions.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI dialogOptions v1.0 3 | * @desc extending jQuery Ui Dialog - Responsive, click outside, class handling 4 | * @author Jason Day 5 | * 6 | * Dependencies: 7 | * jQuery: http://jquery.com/ 8 | * jQuery UI: http://jqueryui.com/ 9 | * Modernizr: http://modernizr.com/ Modernizr adds feature detection. dialogOptions optionally checks for html.touch for scrolling 10 | * 11 | * MIT license: 12 | * http://www.opensource.org/licenses/mit-license.php 13 | * 14 | * (c) Jason Day 2014 15 | * 16 | * New Options: 17 | * clickOut: true // closes dialog when clicked outside 18 | * responsive: true // fluid width & height based on viewport 19 | * // true: always responsive 20 | * // false: never responsive 21 | * // "touch": only responsive on touch device 22 | * scaleH: 0.8 // responsive scale height percentage, 0.8 = 80% of viewport 23 | * scaleW: 0.8 // responsive scale width percentage, 0.8 = 80% of viewport 24 | * showTitleBar: true // false: hide titlebar 25 | * showCloseButton: true // false: hide close button 26 | * 27 | * Added functionality: 28 | * add & remove dialogClass to .ui-widget-overlay for scoping styles 29 | * patch for: http://bugs.jqueryui.com/ticket/4671 30 | * recenter dialog - ajax loaded content 31 | */ 32 | 33 | // add new options with default values 34 | $.ui.dialog.prototype.options.clickOut = true; 35 | $.ui.dialog.prototype.options.responsive = true; 36 | $.ui.dialog.prototype.options.scaleH = 0.8; 37 | $.ui.dialog.prototype.options.scaleW = 0.8; 38 | $.ui.dialog.prototype.options.showTitleBar = true; 39 | $.ui.dialog.prototype.options.showCloseButton = true; 40 | 41 | 42 | // extend _init 43 | var _init = $.ui.dialog.prototype._init; 44 | $.ui.dialog.prototype._init = function () { 45 | var self = this; 46 | 47 | // apply original arguments 48 | _init.apply(this, arguments); 49 | 50 | //patch 51 | if ($.ui && $.ui.dialog && $.ui.dialog.overlay) { 52 | $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function (event) { 53 | return event + '.dialog-overlay'; 54 | }).join(' '); 55 | } 56 | }; 57 | // end _init 58 | 59 | 60 | // extend open function 61 | var _open = $.ui.dialog.prototype.open; 62 | $.ui.dialog.prototype.open = function () { 63 | var self = this; 64 | 65 | // apply original arguments 66 | _open.apply(this, arguments); 67 | 68 | // get dialog original size on open 69 | var oHeight = self.element.parent().outerHeight(), 70 | oWidth = self.element.parent().outerWidth(), 71 | isTouch = $("html").hasClass("touch"); 72 | 73 | // responsive width & height 74 | var resize = function () { 75 | 76 | // check if responsive 77 | // dependent on modernizr for device detection / html.touch 78 | if (self.options.responsive === true || (self.options.responsive === "touch" && isTouch)) { 79 | var elem = self.element, 80 | wHeight = $(window).height(), 81 | wWidth = $(window).width(), 82 | dHeight = elem.parent().outerHeight(), 83 | dWidth = elem.parent().outerWidth(), 84 | setHeight = Math.min(wHeight * self.options.scaleH, oHeight), 85 | setWidth = Math.min(wWidth * self.options.scaleW, oWidth); 86 | 87 | // check & set height 88 | if ((oHeight + 100) > wHeight || elem.hasClass("resizedH")) { 89 | elem.dialog("option", "height", setHeight).parent().css("max-height", setHeight); 90 | elem.addClass("resizedH"); 91 | } 92 | 93 | // check & set width 94 | if ((oWidth + 100) > wWidth || elem.hasClass("resizedW")) { 95 | elem.dialog("option", "width", setWidth).parent().css("max-width", setWidth); 96 | elem.addClass("resizedW"); 97 | } 98 | 99 | // only recenter & add overflow if dialog has been resized 100 | if (elem.hasClass("resizedH") || elem.hasClass("resizedW")) { 101 | elem.dialog("option", "position", "center"); 102 | elem.css("overflow", "auto"); 103 | } 104 | } 105 | 106 | // add webkit scrolling to all dialogs for touch devices 107 | if (isTouch) { 108 | elem.css("-webkit-overflow-scrolling", "touch"); 109 | } 110 | }; 111 | 112 | // call resize() 113 | resize(); 114 | 115 | // resize on window resize 116 | $(window).on("resize", function () { 117 | resize(); 118 | }); 119 | 120 | // resize on orientation change 121 | if (window.addEventListener) { // Add extra condition because IE8 doesn't support addEventListener (or orientationchange) 122 | window.addEventListener("orientationchange", function () { 123 | resize(); 124 | }); 125 | } 126 | 127 | // hide titlebar 128 | if (!self.options.showTitleBar) { 129 | self.uiDialogTitlebar.css({ 130 | "height": 0, 131 | "padding": 0, 132 | "background": "none", 133 | "border": 0 134 | }); 135 | self.uiDialogTitlebar.find(".ui-dialog-title").css("display", "none"); 136 | } 137 | 138 | //hide close button 139 | if (!self.options.showCloseButton) { 140 | self.uiDialogTitlebar.find(".ui-dialog-titlebar-close").css("display", "none"); 141 | } 142 | 143 | // close on clickOut 144 | if (self.options.clickOut && !self.options.modal) { 145 | // use transparent div - simplest approach (rework) 146 | $('
').insertBefore(self.element.parent()); 147 | $('#dialog-overlay').css({ 148 | "position": "fixed", 149 | "top": 0, 150 | "right": 0, 151 | "bottom": 0, 152 | "left": 0, 153 | "background-color": "transparent" 154 | }); 155 | $('#dialog-overlay').click(function (e) { 156 | e.preventDefault(); 157 | e.stopPropagation(); 158 | self.close(); 159 | }); 160 | // else close on modal click 161 | } else if (self.options.clickOut && self.options.modal) { 162 | $('.ui-widget-overlay').click(function (e) { 163 | self.close(); 164 | }); 165 | } 166 | 167 | // add dialogClass to overlay 168 | if (self.options.dialogClass) { 169 | $('.ui-widget-overlay').addClass(self.options.dialogClass); 170 | } 171 | }; 172 | //end open 173 | 174 | 175 | // extend close function 176 | var _close = $.ui.dialog.prototype.close; 177 | $.ui.dialog.prototype.close = function () { 178 | var self = this; 179 | // apply original arguments 180 | _close.apply(this, arguments); 181 | 182 | // remove dialogClass to overlay 183 | if (self.options.dialogClass) { 184 | $('.ui-widget-overlay').removeClass(self.options.dialogClass); 185 | } 186 | //remove clickOut overlay 187 | if ($("#dialog-overlay").length) { 188 | $("#dialog-overlay").remove(); 189 | } 190 | }; 191 | //end close 192 | --------------------------------------------------------------------------------