How do I make a modal shoot and stay in the footer / bottom of the page?

Navigation
1

Modal by default fires from top to top. I want to do the reverse. Let it shoot from below and stay there (at the bottom / footer / footer). I changed the top of it, but in the 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>
    
asked by anonymous 09.12.2015 / 15:19

1 answer

3

I think your solution would be to do the following:

Through JQuery you could do code like this: 

    $('.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 in the html: 

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

For the rest, just make changes possible depending on what you want

Fiddle: link

    
09.12.2015 / 15:54
I need a sequential generator in javascript Problem when styling a placeholder based on a class in CSS