javascript - How to do Modal Bootstrap appear on bottom -

how set bootstrap modal appear in 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 have result this:

thanks help

something work. need play paddings, margins , width adjust modal;

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

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

edit: right class is:

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

otherwise modal won't disappear, if click above it.

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