Twitter Bootstrap modal slides down and fades in, but upon close, it immediately closes, it does not do a slide up fade out transition

Question

The modal works fine, but when you try to close it, it doesn't do the same slide up fade out animation as the demo on the bootstrap javascript page.

I did some debugging and in my version, when it hits $this.element.trigger(e);, it immediately closes the popup. However in bootstrap's demo version, it reaches $this.element.trigger(e), it has no effect on screen and reaches $.supportTransition, and once it hits hideWithTransition(), it slides up and fades out like its supposed to.

Anybody have any idea whats going on? Thank you for any help.

modal:

<div id="myModal" class="modal hide fade" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
<div class="modal-header">
  <button type="button" class="close" data-target="myModal" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h3 id="myModalLabel">Modal Heading</h3>
</div>
<div class="modal-body">
  <h4>Text in a modal</h4>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

  <h4>Popover in a modal</h4>
  <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

  <h4>Tooltips in a modal</h4>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

  <hr>

  <h4>Overflowing text to show optional scrollbar</h4>
  <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>

<div class="modal-footer">
  <button class="btn" data-dismiss="modal">Close</button>
  <button class="btn btn-primary">Save changes</button>
</div>

</div>

anchor modal trigger:

<a role="button" data-toggle="modal"  href="#myModal" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a>

I forgot to mention that I am using this with a magento site. I'm using magento community edition 1.7.0.2. There must be a conflict somewhere, otherwise it should work. I'll try a jsfiddle.

UPDATE!

Ok, I found the culprit. I removed the prototype script that I'm using with Jquery in noconflict mode. Once I removed prototype it worked fine. Anyone have any idea why that would happen with prototype? I'm going to continue trying to find out. Thanks.

Answer 1

Ok, I found the problem after debugging. When I step through the hide method of the bootstrap modal plugin, it calls prototypes hide method:

Element.Methods = {
  hide: function(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
},

The stack trace shows that in jQuery.event.trigger, there is a statement:

elem[type]();

, and this calls prototypes version of "methodize()", and when it does the statement

 __method.apply(), it calls prototypes hide function.

See this related stackoverflow question, which helped me solve my problem popover-hides-parent-element-if-used-with-prototype

All I had to do was rename the $.Event('hide') to $.Event('something_else')