Extending bootstrap jQuery modal

Question

I would like to extend $.fn.modal in Bootstrap/jQuery so my extended version "does things" before a modal is initialized by passing extra options. I tried this like I do some times to extend jQuery prototypes:

var modal = $.fn.modal;

$.fn.modal = function() {
    this.each(function() {
        // do stuff
    });
    modal.apply(this, arguments);
}

$('#modal').modal(); // fails

The example above does not work, although the same pattern works for many other non-bootstrap jQuery prototypes.

Here’s a fiddle that demonstrates it: http://jsfiddle.net/eTWSb/ (just comment the override stuff to see it working).

I was under the impression that cloning a function and then calling it as a "super" is a viable option when you want to add custom functionality.

Any suggestions?

*"Does not work"* as in your code has no effect? Or the modal stop working altogether? What exactly does your code do? Is it something that may be overwritten by the modal code? — I Hate Lazy, Oct 01 '12 at 21:35
*Does not work* as in the modal is not initialized anymore: http://jsfiddle.net/eTWSb/ — David Hellsing, Oct 01 '12 at 21:40
Well that's just weird. I can't figure out why that wouldn't work. — I Hate Lazy, Oct 01 '12 at 21:49
@PetrMarek nope, I want this to be thrown into any bootstrap project. Like a steroid for bootstrap modals. — David Hellsing, Oct 01 '12 at 22:01

score 8 · Accepted Answer · answered Oct 01 '12 at 22:12

OK I figured it out. When overriding $.fn.modal I’m also removing the default options that bootstrap placed in $.fn.modal.defaults (why?).

So when I extended it, I lost the default show: true option that actually shows the modal...

This solves it (but the constructor is lost unless you copy that too):

var modal = $.fn.modal,
    defaults = $.extend({}, $.fn.modal.defaults);

$.fn.modal = function(options) {
    options = $.extend( defaults, options );
    this.each(function() {
        // do stuff
    });
    return modal.call( this, options );
};

score 0 · Answer 2 · edited May 23 '17 at 12:33

The solution provided by David is correct, but to do this, you have to be sure that jQuery is loaded, as mentioned here, so the final solution :

window.onload = function() {
    if (window.jQuery) {  
        //modal extension
        var modal = $.fn.modal,
        defaults = $.extend({}, $.fn.modal.defaults);
        $.fn.modal = function(options) {
        options = $.extend( defaults, options );
        this.each(function() {
          // do stuff
        });
        return modal.call( this, options );
        };
    }
}

Extending bootstrap jQuery modal

2 Answers2