Twitter Bootstrap模態幻燈片

有誰知道我怎麼能得到一個Twitter Bootstrap模式順利地從瀏覽器窗口的頂部滑入位置而不是快速淡入？Twitter Bootstrap模態幻燈片

我一直在尋找this link，但似乎無法看到如何實現滑入式trasition而不是淡入淡出。

在此先感謝您提供的任何幫助。

我此刻的下面的CSS：

.modal-backdrop.fade { 
    opacity: 0; 
} 
.modal-backdrop, .modal-backdrop.fade.in { 
    opacity: 0.8; 
} 
.modal { 
    background-clip: padding-box; 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 6px 6px 6px 6px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    left: 50%; 
    margin: -250px 0 0 -280px; 
    max-height: 500px; 
    overflow: auto; 
    position: fixed; 
    top: 50%; 
    width: 560px; 
    z-index: 1050; 
} 
.modal.fade { 
    top: -25%; 
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s; 
} 
.modal.fade.in { 
    top: 50%; 
}

來源

2013-04-25 Tom Pinchen

如果你的元素已經有了類'.fade'，然後確保在初始化引導的同時不要將它附加到DOM（使用'setTimeout'推遲下一個勾號的引導程序）。 – 2013-04-25 17:15:01

謝謝西蒙，這是有道理的，我會確保這不是安裝:) – 2013-04-25 17:16:32

是「中」級加入到＃示例的div的w3resource例子的問題。如果您刪除「在」類它應該工作，你期望從頂部滑動的方式......

<div class="container"> 
    <h2>Example of creating Modals with Twitter Bootstrap</h2> 
    <div id="example" class="modal hide fade" style="display: none; "> 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <h3>This is a Modal Heading</h3> 
    </div> 
    <div class="modal-body"> 
    <h4>Text in a modal</h4> 
    <p>You can add some text here.</p>     
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn btn-success">Call to action</a> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    </div> 
    </div> 
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p> 
</div>

工作Bootply：http://www.bootply.com/60158

來源

2013-04-27 11:03:46 ZimSystem

真棒謝謝斯凱利！我也不知道Bootply的存在，所以感謝分享這個:) – 2013-04-29 07:20:27

Twitter Bootstrap模態幻燈片

回答

相關問題