javascript - Extending bootstrap jQuery modal - Stack Overflow

admin管理员组

文章数量:1328623

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: / (just ment 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?

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/eTWSb/ (just ment 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?

• javascript
• jquery
• twitter-bootstrap
• modal-dialog
• extend

Share Improve this question Follow edited Oct 2, 2012 at 16:25 Florent 12.4k1010 gold badges5050 silver badges5858 bronze badges asked Oct 1, 2012 at 21:28 David HellsingDavid Hellsing 109k4444 gold badges180180 silver badges214214 bronze badges 5

• "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 Commented Oct 1, 2012 at 21:35
• Does not work as in the modal is not initialized anymore: jsfiddle/eTWSb – David Hellsing Commented Oct 1, 2012 at 21:40
• Is editting the original bootstrap-modal.js an option? – mreq Commented Oct 1, 2012 at 21:48
• Well that's just weird. I can't figure out why that wouldn't work. – 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 Commented Oct 1, 2012 at 22:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 );
};

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

本文标签： javascriptExtending bootstrap jQuery modalStack Overflow