0

该模式工作正常，但是当您尝试关闭它时，它不会像 bootstrap javascript 页面上的演示那样执行相同的向上滑动淡出动画。

我做了一些调试，在我的版本中，当它点击 $this.element.trigger(e); 时，它会立即关闭弹出窗口。然而在 bootstrap 的演示版本中，它到达 $this.element.trigger(e)，它对屏幕没有影响并到达 $.supportTransition，一旦它点击 hideWithTransition()，它会像预期的那样向上滑动并淡出。

有人知道发生了什么吗？感谢您的任何帮助。

模态：

<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>

锚模态触发器：

<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.

4

1 回答 1

0

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')

于 2013-05-07T00:21:37.443 回答