How to make a modal fire and stay at the bottom/bottom of the page?

Question

Modal by default shoots from top to top. I want to do the reverse. Let him shoot from the bottom and stay there (at the bottom/footer/footer). I changed his top, but in mobile the positioning is incorrect.

<div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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"> ABOUT </h4>
      </div>
      <div class="modal-body">
        CONTEÚDO
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

Answer 1

I think your solution would be to do the following:

Through Jquery you could make a code of this type:

    $('.btn').click(function() {
        $('.modal')
            .prop('class', 'modal fade')
            .addClass( $(this).data('direction') );
        $('.modal').modal('show');
    });

And then add this in css:

    .modal.fade:not(.in).bottom .modal-dialog {
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
    }

And finally add a button to html:

    <a class='btn btn-primary btn' data-direction='bottom'></a>

Otherwise, you just make possible changes depending on what you want

Fiddle : http://jsfiddle.net/vaiandrept4/gamge71q/1/