Bootstrap dialog doesn't show on "xs" screen

Question

On a Bootstrap 3 site I have a dialog box. It always opens when its associated button is clicked. However, I would also like it to open when called by a certain function in Javascript:

$('#login').modal('show');

This code works on most screens, but doesn't work on mobile devices (screen size 'xs'). I can't work out why. Here is a minimal(ish) reproduction - resize the preview pane and reload to see what I mean.

http://jsfiddle.net/u7KW6/

Answer 1

The problem seem to appear because you placed your modal div inside your navbar-header. If you move it outside that div like in this example, it will work as you wish.