Bootstrap 4 Модал не прокручивает - PullRequest
Новая
       5

Bootstrap 4 Модал не прокручивает

0 голосов
/ 22 мая 2018

Я использую модал Bootstrap 4 на моем сайте.Модал открывается как положено.

Однако, когда высота экрана слишком мала, невозможно прокрутить модальное окно, чтобы увидеть содержимое вне экрана.

Кроме того, переполнение: скрыто;(открытый модальный класс) применяется к телу, но я могу видеть содержимое позади модального при прокрутке.

Спасибо! 

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.pop-up-login {
    background: #95d5ca;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}
<div class="info col col-12 col-lg-6 order-last order-lg-first">
	<a href="#" class="log-in" data-toggle="modal" data-target="#exampleModal">Log in</a>
</div>
<div class="modal fade pop-up-login" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered" role="document">
	    <div class="modal-content">
	      <div class="modal-body">
					<div class="login-container">
						<h2 class="h1 small">Login</h2>
						<h3 class="h4">With email</h3>
					  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nulla nulla, tempor vel neque sit amet, hendrerit finibus justo. Etiam in maximus ex, quis tristique mi. Cras condimentum lectus non massa dignissim, et posuere magna molestie. Nulla facilisi. Pellentesque facilisis dapibus ligula, eu faucibus lorem pellentesque sit amet. Ut feugiat et orci eget congue. Nam in ullamcorper dui, et tincidunt sem. Maecenas sagittis eros in eros semper suscipit. Vestibulum interdum arcu eget maximus aliquam. Cras ut aliquet sem, at vestibulum odio.

Nulla cursus urna sodales massa scelerisque, ut eleifend augue finibus. In non ex vel lacus tristique ullamcorper iaculis non augue. Cras id orci leo. Cras libero orci, interdum et neque ac, blandit egestas nibh. Vestibulum cursus et libero et consequat. Etiam nec vestibulum mi. Proin scelerisque nisl a rhoncus pretium. In eu orci sapien. Quisque interdum ac massa sit amet aliquam. Ut non vulputate nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sit amet dui a massa vestibulum viverra ac non libero. Maecenas orci nunc, tempor eu sem quis, malesuada interdum libero. Proin ante lorem, sodales id facilisis nec, maximus eu felis.

Curabitur sed tristique turpis, at malesuada erat. Donec porta diam eget pretium pretium. Fusce rhoncus leo non quam sagittis, ut dictum nisl mattis. Nam lorem metus, fermentum nec lacinia vel, rhoncus non tellus. Cras urna diam, tempus sed nisl vel, volutpat eleifend urna. Nam non imperdiet ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quis ante gravida, eleifend ante in, malesuada magna. Integer ac dolor eu ante finibus mollis. Nulla facilisis libero blandit placerat cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula purus, euismod tempor consequat eu, ornare quis urna. Pellentesque interdum neque et enim sagittis laoreet.</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
...