fullsize_modal_from_bottom.html

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio neque, mollis ullamcorper venenatis quis, pharetra eu turpis. Aenean molestie mattis egestas. Donec at arcu ultrices, ullamcorper felis sed, convallis nunc. Proin faucibus viverra luctus. Etiam interdum iaculis urna. Nam quis ex at massa condimentum mattis quis semper purus. Morbi ac ipsum quis purus ullamcorper lacinia eu nec orci. Nam convallis purus laoreet purus convallis, sit amet aliquam odio pharetra. Pellentesque sollicitudin lacus at justo iaculis semper. Duis et est mattis, sagittis felis at, porta dui. Praesent scelerisque dolor in pulvinar blandit. Donec venenatis diam sem, ac venenatis ligula tincidunt ac. Donec vestibulum imperdiet lorem, non commodo massa finibus et. In dignissim ligula elit, et laoreet augue porttitor sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt, justo sit amet egestas aliquam, ante eros fermentum tellus, vel condimentum erat ipsum eget felis. Vestibulum ultrices sit amet risus et varius. Vestibulum varius ipsum in pellentesque auctor. Nulla eu suscipit ipsum. In nisi augue, bibendum eget nulla et, hendrerit maximus mi. Phasellus odio justo, feugiat quis interdum at, ornare a leo. Aliquam tempor, erat a lobortis condimentum, ligula metus accumsan urna, a fringilla nibh tortor a tellus. Aliquam convallis porta dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam pretium felis vulputate dui euismod, quis elementum ex maximus. Etiam viverra quis metus a rhoncus. Donec ac tincidunt risus. Nulla facilisi. Aliquam vehicula pulvinar elit nec imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris elementum iaculis felis, ut iaculis odio rutrum et. Nullam lacus elit, gravida tincidunt nisl quis, viverra faucibus justo. Duis eleifend turpis et enim sodales, non vehicula risus egestas. Maecenas venenatis vulputate sapien, at rutrum orci. Phasellus consectetur, massa quis convallis blandit, risus sem vulputate libero, in facilisis lectus augue id orci. Quisque at porta tellus. Donec non blandit sem. Curabitur eu rhoncus nisi. Integer convallis lorem in lacus commodo, et efficitur diam auctor. Nam euismod placerat sapien. Donec nibh lectus, auctor ac tortor nec, posuere interdum tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at leo ornare, pulvinar sapien quis, blandit purus. Vivamus tempus vitae dolor a pretium. Praesent eu convallis diam. In congue ac libero id condimentum. In dapibus iaculis mauris, varius rutrum risus hendrerit sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent venenatis, dui a facilisis venenatis, odio est facilisis ante, ut malesuada ipsum sem non nulla. Suspendisse non massa vitae massa ultricies congue. Nam vel rutrum mauris. Nulla aliquam aliquet varius.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio neque, mollis ullamcorper venenatis quis, pharetra eu turpis. Aenean molestie mattis egestas. Donec at arcu ultrices, ullamcorper felis sed, convallis nunc. Proin faucibus viverra luctus. Etiam interdum iaculis urna. Nam quis ex at massa condimentum mattis quis semper purus. Morbi ac ipsum quis purus ullamcorper lacinia eu nec orci. Nam convallis purus laoreet purus convallis, sit amet aliquam odio pharetra. Pellentesque sollicitudin lacus at justo iaculis semper. Duis et est mattis, sagittis felis at, porta dui. Praesent scelerisque dolor in pulvinar blandit. Donec venenatis diam sem, ac venenatis ligula tincidunt ac. Donec vestibulum imperdiet lorem, non commodo massa finibus et. In dignissim ligula elit, et laoreet augue porttitor sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt, justo sit amet egestas aliquam, ante eros fermentum tellus, vel condimentum erat ipsum eget felis. Vestibulum ultrices sit amet risus et varius. Vestibulum varius ipsum in pellentesque auctor. Nulla eu suscipit ipsum. In nisi augue, bibendum eget nulla et, hendrerit maximus mi. Phasellus odio justo, feugiat quis interdum at, ornare a leo. Aliquam tempor, erat a lobortis condimentum, ligula metus accumsan urna, a fringilla nibh tortor a tellus. Aliquam convallis porta dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam pretium felis vulputate dui euismod, quis elementum ex maximus. Etiam viverra quis metus a rhoncus. Donec ac tincidunt risus. Nulla facilisi. Aliquam vehicula pulvinar elit nec imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris elementum iaculis felis, ut iaculis odio rutrum et. Nullam lacus elit, gravida tincidunt nisl quis, viverra faucibus justo. Duis eleifend turpis et enim sodales, non vehicula risus egestas. Maecenas venenatis vulputate sapien, at rutrum orci. Phasellus consectetur, massa quis convallis blandit, risus sem vulputate libero, in facilisis lectus augue id orci. Quisque at porta tellus. Donec non blandit sem. Curabitur eu rhoncus nisi. Integer convallis lorem in lacus commodo, et efficitur diam auctor. Nam euismod placerat sapien. Donec nibh lectus, auctor ac tortor nec, posuere interdum tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at leo ornare, pulvinar sapien quis, blandit purus. Vivamus tempus vitae dolor a pretium. Praesent eu convallis diam. In congue ac libero id condimentum. In dapibus iaculis mauris, varius rutrum risus hendrerit sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent venenatis, dui a facilisis venenatis, odio est facilisis ante, ut malesuada ipsum sem non nulla. Suspendisse non massa vitae massa ultricies congue. Nam vel rutrum mauris. Nulla aliquam aliquet varius.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<script>
  $('.btn').click(function() {
    $('.modal')
        .prop('class', 'modal fade') // revert to default
        .addClass( 'bottom' );
    $('.modal').modal('show');
});
</script>

<style>
  .modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
.modal.fade:not(.in).bottom .modal-dialog {
	-webkit-transform: translate3d(0, 25%, 0);
	transform: translate3d(0, 25%, 0);
}
</style>