How to do Modal Bootstrap appear on bottom

Question

How to set up the bootstrap for modal appear in the browser's bottom?

https://jsfiddle.net/9fg7jsu3/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">  
        <div class="modal-content">
           <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

I hope to have a result like this:

Thanks for any help

Answer 1

Something like that will do the work. Now you need to play with paddings, margins and width to adjust your modal;

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}  

Use modal-dialog, not modal, otherwise the modal won't disappear if you click above it.

https://jsfiddle.net/9fg7jsu3/2/