Bootstrap 4 Modal不会滚动

时间:2018-05-22 19:50:40

标签: html css bootstrap-4 bootstrap-modal

我在我的网站上使用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>
&#13;
&#13;
&#13;

0 个答案:

没有答案