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
– I Hate Lazy, Commented Oct 1, 2012 at 21:35
Does not work as in the modal is not initialized anymore: jsfiddle.net/eTWSb — David Hellsing
– David Hellsing, Commented Oct 1, 2012 at 21:40
Well that's just weird. I can't figure out why that wouldn't work. — I Hate Lazy
– I Hate Lazy, Commented Oct 1, 2012 at 21:49
@PetrMarek nope, I want this to be thrown into any bootstrap project. Like a steroid for bootstrap modals. — David Hellsing
– David Hellsing, Commented Oct 1, 2012 at 22:01

David Hellsing · Accepted Answer · 2012-10-01 22:12:47Z

8

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 );
};

answered Oct 1, 2012 at 22:12

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:33:24Z

0

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 );
        };
    }
}

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Oct 23, 2015 at 16:48

Marco Predari

1331 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Extending bootstrap jQuery modal

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related