Bootstrap Modal Responsive - Height

Asked

Viewed 4,379 times

1

I need a responsive modal that adapts the height of the browser.

If the whole modal does not reach the height the scroll will not be shown, but if it exceeds the size/height, the scroll will be shown in the modal body. Header and Footer continue to be shown.

╔════════════════════════════X
║         **HEADER**         ║ ---> height do modal (header + budy +   
╠════════════════════════════╣      footer) tem que ser no máximo 
║ - aaaaaaaaa              ║ ║      to tamanho da janela/browser.
║ - eeeeeeeee              ║ ║ 
║ - ddddddddd              ║ ║ 
║ - aaaaaaaaa              ║ ║ 
║ - ccccccccc              ║ ║
║ - bbbbbbbbb              ║v║ ---> Scroll (Somente no Body)
╠════════════════════════════╣
║         **FOOTER**         ║
╚════════════════════════════╝  


<div id="idModal" class="modal fade">
<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">Modal title</h4>
        </div>
        <div class="modal-body" >
         - aaaaaaaaa
         - eeeeeeeee
         - ddddddddd
         - aaaaaaaaa
         - ccccccccc
         - bbbbbbbbb
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
    </div>
 </div>

jquery css modal

  • If the modal is of the height of the window, you want it to touch the top/bottom edges of the window or have the default margin?

  • If the modal is small... would be centered on the screen... Horizontal is already ok here... my problem is the height... qdo very big surpasses the screen there has to go in the browser scroll and not the modal.

  • Are you using any bootstrap framework? Do you already have the modal working? If possible post what you already have of CSS and JS also so we can test with the modal working the way it is in your system.

  • I am using modal/bootstrap. https://getbootstrap.com/docs/4.0/components/modal/

1 answer

2


You can use an event resize and the native modal callback. First add this CSS:

.modal-content{
   max-height: 100%; /*altura da modal*/
}

.modal-dialog{
   height: 100%; /*altura da view da modal*/
   margin-top: 0;
}

.modal-body{
   overflow: auto; /*habilita o overflow no corpo da modal*/
}

And the jQuery:

<script>
$(window).on('resize', function(){
   $this = $('#idModal');
   if($this.hasClass('show')){
      var budy = $this.find('.modal-body');
      var temScrol = budy.get(0).scrollHeight > budy.get(0).clientHeight;

      var mdheader = $this.find('.modal-header').outerHeight();
      var mdfooter = $this.find('.modal-footer').outerHeight();
      var mdbody = window.innerHeight-(mdheader+mdfooter);

      $this.find('.modal-body').css({
         'height': temScrol ? mdbody+'px' : 'auto'
      });
   }
});
$('#idModal').on('shown.bs.modal', function(){
   $(window).trigger('resize');
});
</script>

Example:

$(window).on('resize', function(){
   $this = $('#idModal');
   if($this.hasClass('show')){
      var budy = $this.find('.modal-body');
      var temScrol = budy.get(0).scrollHeight > budy.get(0).clientHeight;

      var mdheader = $this.find('.modal-header').outerHeight();
      var mdfooter = $this.find('.modal-footer').outerHeight();
      var mdbody = window.innerHeight-(mdheader+mdfooter);

      $this.find('.modal-body').css({
         'height': temScrol ? mdbody+'px' : 'auto'
      });
   }
});
$('#idModal').on('shown.bs.modal', function(){
   $(window).trigger('resize');
});
.modal-content{
   max-height: 100%; /*altura da modal*/
}

.modal-dialog{
   height: 100%; /*altura da view da modal*/
   margin-top: 0 !important;
}

.modal-body{
   overflow: auto; /*habilita o overflow no corpo da modal*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#idModal">
  Abrir modal
</button>
<div id="idModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
    <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">Modal title</h4>
        </div>
        <div class="modal-body" >
         - aaaaaaaaa
         - eeeeeeeee
         - ddddddddd
         - aaaaaaaaa
         - ccccccccc
         - bbbbbbbbb
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
    </div>
 </div>

Here in the snippet the behavior is a little different from the browser, by this can appear a scroll bar in the window when running the example.

  • Perfect... That was it. Thank you very much.

Browser other questions tagged jquery css modal

You are not signed in. Login or sign up in order to post.