1

I have what should be a very simple modal using Twitter Bootstrap 3. The modal displays no problem, but it doesn't fade in from the top, as it does in this example, http://getbootstrap.com/javascript/#modals. Instead, it just plonks itself on the screen.

Here's the trigger:

<a href='#registerEmail' data-toggle='modal' class='btn btn-primary btn-lg'>Sign up with Email</a>

Here's the modal:

<div class='modal fade' id='registerEmail' tabindex='-1' role='dialog'>
    <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
                This is the header
            </div>
            <div class='modal-body'>
                This is the body
            </div>
            <div class='modal-footer'>
                This is the footer
            </div>
        </div>
    </div>
</div>

I am pretty sure that it was working before.

I checked out this other answer, Twitter Bootstrap: Modal popup won't fade, where the modal was nested within another .fade class, but that's not the case with my code above.

Also, I'm including the entire bootstrap javascript file (at the bottom of the page) so this can't be the problem. I am loading jQuery too (before the bootstrap js).

EDIT:

This is bizarre. In the process of creating a JS fiddle I went through and eliminated extraneous elements in the page, one at a time. When I commented out a line so that my own site-wide.js would not load in the document head, the problem ceased. I then restored the line that includes site-wide.js, but I can't recreate the problem???

Community
  • 1
  • 1
DatsunBing
  • 8,684
  • 17
  • 87
  • 172

1 Answers1

0

Firstly, thanks for the comments above.

In the end I commented out some unnecessary javascript includes and that solved the problem. Presumably it was a namespacing issue? Interesting to see that it could manifest in such a subtle manner.

DatsunBing
  • 8,684
  • 17
  • 87
  • 172