admin管理员组文章数量:1322018
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?
Share Improve this question edited Oct 2, 2012 at 16:25 Florent 12.4k10 gold badges50 silver badges58 bronze badges asked Oct 1, 2012 at 21:28 David HellsingDavid Hellsing 109k44 gold badges180 silver badges214 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
2 Answers
Reset to default 8OK 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
版权声明:本文标题:javascript - Extending bootstrap jQuery modal - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742112648a2421322.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论