Two Modal Dialogs Will Hang the Browser

[tangrui]

http://jsfiddle.net/guyong/EUVWC/2/

1. Click the button read 'Click Me'
2. On the modal dialog click 'Show Another'
3. Then click the textbox
4. Firefox will be unresponsive

[sam6230i]

I am facing exactly same issue. Two active modals crashes firefox.

[mdo]

Don't stack modals—feels like a broken experience from my perspective.

[ztane]

This could occur for example in case an user accesses functionality that requires login; a modal login box is shown. Now, if an error occurs within the login window, we cannot show the message in a modal box because it would crash the browser

[everilae]

Broken experience or not, JS library crashing browser with rather innocent operation is funky. The problem comes up to this in bootstrap/js/bootstrap-modal.js:

, enforceFocus: function () {
    var that = this
    $(document).on('focusin.modal', function (e) {
      if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
        that.$element.focus()
      }
    })
  }

The 2 modals start competing about focus in a loop.

[everilae]

In my humble opinion the right thing to do would be to enforce focus for the most recent modal only.

[eric-brechemier]

+1 - I experience the same issue, and a fix would be most helpful. JavaScript components should not change the focus unless this is explicitly requested.

[fat]

we don't want to start keeping track of multiple modals. That method was added for accessibility. If you want multi-modal support, you should extend the modal class.

[everilae]

The track keeping doesn't require large additions - tried doing exactly that in pull request #5181. But, as it isn't a wanted feature, would it be possible at least for the vanilla modal class not to crash the browser? Even if people (like us) are doing bad UI design :P.

[eric-brechemier]

For backstory: enforceFocus() has been introduced in SHA: a404ac3 for "modal accessibility tab control".

In the same commit, relaxFocus() was added as well:

 relaxFocus: function () {
  $(document).off('focus.modal')
}

The relaxFocus() method was then inlined in next commit (SHA: 10c6db4). The call is still present in hide():

$(document).off('focusin.modal')

[eric-brechemier]

@fat I vote to reopen this issue. Can we add an option "tabcontrol" to enable enforceFocus() explicitly?

This would allow to describe in the documentation how this behavior enhances accessibility, and the fact that it can cause the browser to crash in case multiple modals are stacked.

[eric-brechemier]

@everilae thanks for the heads up on enforceFocus(). It is kind of hard to debug an issue when the whole browser becomes unresponsive!

I am not sure that explicit support for stacked modals is needed in Bootstrap though. In my case, I could avoid the issue by disabling tab control right after opening each modal:

$(document).off('focusin.modal');

[apaleslimghost]

This issue is fucking impossible to debug. The stack overflow errors in Chrome don't keep track of line numbers, and the callback in enforceFocus is anonymous, so looking at the stack trace gives you no clue whatsoever that it's from Bootstrap. Bad design or no, don't crash the browser.

[jschr]

I took a crack at extending the modal class to allow for better responsiveness, multiple modals and a few other features. You can check out a demo here: http://jschr.github.com/bootstrap-modal/

[eminos]

A simple solution for Firefox crashing with multiple modals seems to only have one modal with the "fade"-class. Worked for me.
http://www.chapter31.com/2011/10/27/twitter-bootstrap-modal-not-working-in-firefox/

[edit]
..or maybe not.

[sivakolluru]

any one pls help me, i m mew for twitter bootstrap so pls tel me , how to use for web devlopment?

[sivakolluru]

eminos can u pls suggest how to use bootstrap?

[eminos]

@jschr Seems like you have a solution there. What is the easiest way to implement your code with existing Boostrap? I'm only interested in the multiple stackable modals fix for now.

[jschr]

@eminos All you should need to do is include the additional css/js files from https://github.com/jschr/bootstrap-modal after the bootstrap files.

bootstrap-modal.js is dependent on bootstrap-modalmanager.js so make sure to include it after .

Hope that helps.

[Slogo]

It's absolutely ridiculous to close issues like this, this should be re-opened. Regardless of good design, bad design, or merely 'bad design because I say so' crashing a browser is unacceptable under any circumstances. If multiple modals are an issue, or displaying multiple modals in a certain way is not going to be supported, the issue should be handled gracefully or blocked from occurring.

It's fine to tell users to extend modal if they want multiple modals on a page. It's not fine to force them to work around a browser crashing bug when they do extend the modal class. You're asking everyone with a legitimate reason for multiple modals (and there ARE plenty) to work around a browser crashing bug on their own.

[Slogo]

Furthermore this is a relatively easy fix if you only want to support 1 modal at a time. enforceFocus can be updated to call $(document).off('focusin.modal');. The whole problem seems to stem from the fact that 2 modals can both have event handlers active for the focusin.modal event. That way you won't crash the browser.

[elwayman02]

Yea, this doesn't make any sense. There are plenty of valid reasons to open modals on top of modals...it's really quite unexpected that Bootstrap doesn't support this in the first place. But, even if for some strange reason you think it's actually preferable to NOT have this capability (o.O), you shouldn't be crashing people's browsers just because a second modal opened on their screen.

[onassar]

I've found my fix for bootstrap-modal v2.2.0 here: #5022 (comment)
Not elegant, and removes the focusing of modal functionality, but helps me get passed this challenge without spending more time :)

[stephankaag]

I created a new pull request based on @everilae 's work #5833

[tylerjames]

I previously had a problem when stacking multiple modals where the z-index of the backdrop was the same for each modal, which meant you could interact with the modal behind the top modal. Someone, I can't remember who but the fates smile upon him, posted a hack to increase the z-index of the topmost modal.

Adding this hack and completely commenting out the enforceFocus() method has fixed the problem for me. This might not be a solution for people who don't want a backdrop, but right now it's better than crashing. This is not a general-case solution for multiple modals but it could probably be extended to work with multiple.

This was the solution:

• add class 'level2' to a modal that appears on top of another modal
• in your css add:
  .modal.level2 {
  z-index:1052
  }

That raises the z-index of the second modal. Now the backdrop for the top modal will obscure the lower modal and you won't have focus issues or any interaction with the lower modal.

[dcasadevall]

We solved this without using any hacks by doing the following:

1. Before calling any of the modals:
   var oldFocus = jQuery().modal.Constructor.prototype.enforceFocus;
   jQuery().modal.Constructor.prototype.enforceFocus = function(){};
2. After BOTH conflicting modals have been created (they can be shown or not, doesn't matter).

// restore enforceFocus functionality
jQuery().modal.Constructor.prototype.enforceFocus = oldFocus;

This might be ugly , but this way you don't have to modify any source and won't have any problems when they do update the issue.

[winterbe]

Thanks for the workaround!

Why is the issue closed? The bug still exists in Bootstrap 2.3.

[ztane]

The bug was closed because the Bootstrap authors seem to think that PEBKAC - the programmer is stupid if at any time 2 modals are open at the same time.

[Saturate]

I tried to debug this, it was a nightmare due to the complexity of the app that I am building, I had no easy way to know what was going on without a stack-trace. Chrome just crashed and the log printed:

<error>
v.event.dispatch
o.handle.u
v.event.trigger
(anonymous function)
v.extend.each
v.fn.v.each
v.fn.extend.trigger
v.fn.(anonymous function)
(anonymous function)
v.event.dispatch
o.handle.u
v.event.trigger

Now after some time I found the reason; it was the modals. Now I never intended there to be more than one, but a bug made it possible, and I could not see this due to the browser crashing.

I really hope that you will at least throw an error, this is the right thing to do. Crashing the browser is not an option.

I do not want to see this:

I would rather like something like this:

[nosachamos]

Wow, closing this really??

At the place I work devs can't close bugs, only QA can. That's FOR A REASON. I honestly had a higher idea of the authors before they closed this ridiculously severe bug. Not even newbie would do that. Not sure I want to use anything from them anymore.

[0plus1]

Devs seems to miss the point of this issue.

If you don't want people to use two modals in the same page (which is a totally understandable development position) you should throw an exception, log an error or whatever you want that it's not the current: "crash the whole browser".

Good software return an error upon an unexpected behaviour, bad software crash, very bad software ignore a real issue that, to be clear, is not something so uncommon to encounter as you might notice from this list of people reporting this error.

[jbenet]

I agree with the previously voiced comments.

Regardless of support for multiple modals, bootstrap SHOULD NOT crash browsers if two are thrown.

@mdo @fat please reopen this.

[vcfgvcfg]

I know stack modal is not supported by bootstrap.

For anyone who is facing this issue: a quick work around would be binding a focusin handle to the child modal and stop the focus stopPropagation. The hasClass('modal') check is in case that we have tooltip or calendar in modal.

        // hack to make bootstrap modal stacking work.
        $childModal.on('shown', function (e) {
            var $t = $(e.target);
            if ($t.hasClass('modal')) {
                $t.data('modal').$backdrop.zIndex(1047);
            }
        }).on('hidden', function (e) {
            // add modal open class since we still have opened modal.
            var $t = $(e.target);
            if ($t.hasClass('modal')) {
                $('body').addClass('modal-open');
            }
        }).on('focusin', function (e) {
            // stop focusin competition war.
            e.stopPropagation();
        });

[fat]

didn't crash my firefox… am i crazy. im probably crazy. @mdo o_O

[fat]

@nosachamos 👯

[mdo]

@fat Dunno bro, this was over a month ago :). Apparently some folks saw this in Firefox, IE8, and Chrome.

[fat]

does it crash your shit in chrome O_o

[mdo]

Seeing two issues, one in IE8 (prompts an error_ and one in latest Firefox (console only).

[mdo]

Uncaught RangeError: Maximum call stack size exceeded in latest Chrome console as well.

However, none of these browsers crashed when viewing that jsfiddle in the opening comment.

[fat]

i actually think its pretty funny, i say leave it 👯

[fat]

that's us

[fat]

dancing

[fat]

…i'll fix it…

[jbenet]

Hooray!

[fat]

k fixed.

[fat]

this wont crash a browser anymore but it's an awful user experience. truly awful.

[grokys]

Appreciated. I think we all agree it's an awful user experience, but when users tell me their browser is crashing and I have no idea why... Well that's much worse.

[Odrin]

@fat It's awful, but...... But sometimes it is impossible to explain this stupid customers =)

[pascalmartin]

Sample fixed http://jsfiddle.net/EUVWC/29/