Make twitter Bootstrap popup modal slide and stick to bottom of page

Question

I am using bootstrap 2.3 and I have a modal that slides from the bottom of the page after a few seconds and I want it to stick to the bottom of the screen. Everything is wor

Answer 1

The problem is in your CSS. You need to set the bottom property not the top property in order to get your desired result, but you can't do this on the .modal class, you need to do it on the .modal-body class.

Demo

CSS:

.modal.fade.in .modal-body {
    bottom: 0; 
}
.modal-body {
    position: absolute;
    bottom: -250px;
    right: 5%;
    padding: 15px;
    width: 275px;
    height: 250px;
    background-color: #e5e5e5;
    border-radius: 6px 6px 0 0;
    -webkit-transition: bottom 0.3s ease-out;
    -moz-transition: bottom 0.3s ease-out;
    -o-transition: bottom 0.3s ease-out;
    transition: bottom 0.3s ease-out;
}
.close {
    margin-top: -20px;
    text-shadow: 0 1px 0 #ffffff;
}
.popup-button {
    margin-left: 140px;
    margin-top: 77px;
    font-weight: bold;
}

HTML:

<div class="modal fade" id="slide-bottom-popup" data-keyboard="false" data-backdrop="false">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <p>I'm a pop sliding from the bottom that's suppose to stick</p>
        <a href="" class="btn-primary btn-plain btn popup-button">CTA</a>
    </div><!-- /.modal-body -->
</div><!-- /.modal -->