Question

I always find myself fixing this chrome scrollbar issue on every jQueryUI modal I add. So, I was thinking that I could add that code to the jqueryUI dialog defaults. I found this question but can’t quite bridge the gap and apply it to my code.

$.extend($.ui.dialog.prototype.options, {
    open: function(event, ui){
        window.setTimeout(function(){jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay');}, 100);
    }
});

The problem is, if I have code in a dialog open event, it will override the default.

$("#modalContent").dialog({
    open:function(){
        alert('Hey buddy!');
    }
});

So my question is two parts; How do I stack the functions instead of overriding them and should I even do this in the first place? Thanks!

Here is a jsfiddle:
http://jsfiddle.net/McWatt/HSA8M/

Answer 1

The solution is alot simpler then that. You can just remove those events by overriding $.ui.dialog.overlay.events, which will prevent them from being bound to begin with:

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

Note: If you remove keydown you won’t be able to close the dialog with the escape key. You might want to look at overriding the create-method as well. Check the source for more info.

See test case on jsFiddle