Как добавить прокрутку в модале начальной загрузки?

Question

Я создал полноэкранный мод с использованием Bootstrap, когда слишком много контента, который я не могу прокрутить.Это мой код:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

Полный JSFIDDLE .

Answer 1

Замените свой CSS этим

.modal-full .modal-content {
   min-height: 100vh;
   max-height: 100vh;
   overflow-y: scroll;
}

Answer 2

Модальности Bootsrap имеют эту функцию по умолчанию.

Вам просто нужно внести изменения в классы .modal-dialog и .modal-content, чтобы сделать модальный полноэкранный режим.Проверьте это fiddle для рабочего примера:)

.modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

Answer 3

Использование overflow: auto; до .modal-full

.modal-dialog {
    position: fixed;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.modal-full {
    min-width: 100%;
    overflow:auto;
}

    .modal-full .modal-content {
        min-height: 100vh;
    }

 <div class="modal-dialog modal-full">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myModalLabel">Test</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        </div>
                                        <div class="modal-body">
                                            <h6>Text in a modal</h6>
                                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                                            <hr>
                                            <h6>Overflowing text to show scroll behavior</h6>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->