0

模態工作正常,但是當你試圖關閉它,它不會做同樣的向上滑動淡出動畫作爲引導javascript頁面上的演示。Twitter的引導模式滑下和淡入,但在靠近,它立即關閉,它不會做向上滑動淡出過渡

我做了一些調試和我的版本,當它擊中$ this.element.trigger(E),則它會立即關閉彈出窗口。然而,在引導的演示版本,達到$ 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> 

我忘了提,我用這與Magento站點。我使用的是magento社區版1.7.0.2。某處有衝突,否則應該起作用。我會嘗試一個jsfiddle。

更新!

好吧,我找到了罪魁禍首。我以noconflict模式刪除了我正在使用的Jquery的原型腳本。一旦我刪除了原型,它工作正常。任何人都知道爲什麼會出現原型?我將繼續試圖找出答案。謝謝。

+0

發佈您的代碼,請! – 2013-05-06 21:14:28

+0

發佈的代碼按預期工作:http://jsfiddle.net/jasny/6Wh6a/ – 2013-05-06 23:14:10

回答

0

好吧,我發現經過調試的問題。當我通過自舉模式插件的隱藏方法步驟,它調用原型隱藏方法:

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

堆棧跟蹤顯示,在jQuery.event.trigger,有一種說法:

elem[type](); 

,這稱之爲原型版本「methodize()」,當它的聲明

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

看到這個計算器的相關問題,這幫助我解決我的問題popover-hides-parent-element-if-used-with-prototype

我所要做的就是重新命名$ .Event( '隱藏'),以$ .Event( 'something_else')

+0

我該如何解決這個問題? – Masu 2013-05-07 01:03:06