1

Twitter Bootstrap モーダルをブラウザ ウィンドウの上部から所定の位置にスムーズにスライドさせる方法を知っている人はいますか?

このリンクを見てきましたが、フェードではなくスライドインのトランジションを実現する方法がわかりません。

よろしくお願いいたします。

現在、次の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%;
}
4

1 に答える 1

0

w3resource の例の問題は、#example div に追加された「in」クラスでした。「in」クラスを削除すると、上からのスライドが期待どおりに機能するはずです...

<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-27T11:03:46.863 に答える