jQuery UI Dialog Options

Responsive dialog, click outside

by jasonday

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<a id="opener" href="javascript:void(0);">open dialog</a>

<p>test test test</p>
<p>test test test</p>
<p>test test test</p>
<p>test test test</p>
<p>test test test</p>
<p>test test test</p>
<p>test test test</p>
<div id="dialog" title="Dialog Title">
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
    <p>I'm a dialog</p>
</div>

CSS

#dialog {
    height: 800px;
    width: 600px;
}

JavaScript

// add new options with default values
$.ui.dialog.prototype.options.clickOut = true;
$.ui.dialog.prototype.options.responsive = true;
$.ui.dialog.prototype.options.scaleH = 0.8;
$.ui.dialog.prototype.options.scaleW = 0.8;
$.ui.dialog.prototype.options.showTitleBar = true;
$.ui.dialog.prototype.options.showCloseButton = true;


// extend _init
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
    var self = this;

    // apply original arguments
    _init.apply(this, arguments);

    //patch
    $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function (event) {
        return event + '.dialog-overlay';
    }).join(' ');

};
// end _init


// extend open function
var _open = $.ui.dialog.prototype.open;
$.ui.dialog.prototype.open = function () {
    var self = this;

    // apply original arguments
    _open.apply(this, arguments);

    // get dialog original size on open
    var oHeight = self.element.parent().outerHeight(),
        oWidth = self.element.parent().outerWidth(),
        isTouch = $("html").hasClass("touch");

    // responsive width & height
    var resize = function () {

        //check if responsive
        // dependent on modernizr for device detection / html.touch
        if (self.options.responsive === true || (self.options.responsive === "touch" && isTouch)) {
            var elem = self.element,
                wHeight = $(window).height(),
                wWidth = $(window).width(),
                dHeight = elem.parent().outerHeight(),
                dWidth = elem.parent().outerWidth(),
                setHeight = Math.min(wHeight * self.options.scaleH, oHeight),
                setWidth = Math.min(wWidth * self.options.scaleW, oWidth);

            if ((oHeight + 100) > wHeight || elem.hasClass("resizedH")) {
                elem.dialog("option", "height", setHeight).parent().css("max-height", setHeight);
                elem.addClass("resizedH");
            }
            if...