Does anyone know how I can get a Twitter Bootstrap modal to smoothly slide in from the top of the browser window into position rather than fade in quickly?
I have been looking at this link but can't seem to see how to achieve a slide-in trasition rather than a fade.
Thanks in advance for any help you can offer.
I have the following CSS at the moment:
.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%;
}
The problem the w3resource example was the "in" class added to the #example div. If you remove the "in" class it should work the way you expect an slide in from the top...
<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>
Working on Bootply : http://www.bootply.com/60158
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.