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">×</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.