Возможно ли иметь фиксированный заголовок внутри длинного модала без полос прокрутки или фиксированной высоты на модальном?

Question

Я пытаюсь создать модальный, который имеет динамические длинные высоты, которые потребуют прокрутки, но хотелось бы, чтобы полосы прокрутки были на теле, а не внутри модального. Следующая часть этого будет состоять в том, чтобы заголовок был зафиксирован, чтобы он всегда отображался при прокрутке модального. Я пытался на пару дней найти решение, но не повезло.
Любая помощь приветствуется.

$('.launch-scroll').on('click', function(e) { 
 
    $('#modal-scroll').modal({ 
 
    show: true 
 
    }); 
 
});

.modal { 
 
    overflow: hidden; 
 
} 
 
.modal .modal-body { 
 
    height: 500px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="page-container"> 
 
    <div class="container"> 
 
    <br /> 
 
    <button type="button" class="btn launch-scroll">Launch Confirm</button> 
 
    </div> 
 
</div> 
 
<div class="modal fade" id="modal-scroll"> 
 
    <div class="modal-dialog"> 
 
    <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">Can a header be fixed, without modal scrollbars?</h4> 
 

 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      <p>Heaps of text to make this modal have heaps of height</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

Answer 1

Это ваше правило CSS, который нуждается в изменении:

.modal .modal-body { 
    height: 500px; 
    overflow: auto; 
} 

Снимите height:500px; и модальный будет расширяться выше видового экрана, задающей ее скроллбар к <body> элементу.

Обновление: Для фиксированного заголовка можно перемещать .modal-header элемент, который находится внутри .modal-content быть непосредственно перед .modal-dialogue. Затем добавить padding-top: 60px; правилу выше и добавьте следующие правила для заголовка (Demo):

.modal-header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 17px; 
    z-index: 10; 
    background: white; 
}