Why does multiple modal using twitter bootstrap got error too much recursion?

Ok, it seems like an issue that has been discovered.

(apparently I should use key word "Uncaught RangeError: Maximum call stack size exceeded" instead of "too much recursion" :( )

Here are the solutions.

1. modify the modal.js

in this post, https://github.com/twbs/bootstrap/pull/5022

@onassar bring up a solution

Follow up: for anyone working with bootstrap-modal v2.2.0, in the enforceFocus method, commenting out that.$element.focus() seems to fix the issue.

The result of this is the modal's don't get focused upon (pfft, I can do that myself :P), and thus, the multiple modals don't challenge one-another for focus (which resulted in an infinite loop, and a rangerror/recursive loop).

Hope that helps :)

I tried and it works. (plunker)

2. Use another plugin to address this Demo

It seems like it works pretty well.

3. Wait for official solution.

In their roadmap, they do want to rewrite this modal plugin at some point.

You can apply the first solution of maxisam answer, without modifying bootstrap files (if you can not, or don't want to).

Just write this line somewhere after bootstrap files have been included.

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Note: This has been tested with Bootstrap 2 only, not with Bootstrap 3.