javascript - 模态 CSS 高度 100% 滚动后不覆盖屏幕？

Question

参加了介绍性网页设计类(class)，所以我的知识非常有限。我正在处理一个页面，该页面应该在单击图像后显示模式。它似乎工作正常，除非他们先向下滚动然后单击模态。当发生这种情况时，模态将被切断并且不会显示在整个页面中。经过一些搜索，我知道如果用户滚动高度 100% 不起作用，那么有什么办法可以解决这个问题吗？这是我的代码，如果写得不好，我深表歉意，类里面还没有教过模态，所以我在 youtube 上看了一些视频来制作这个。

Answer 1

使用主模型包装器 position: fixed;高度:100%； width: 100%; 并且停止滚动使 body overflow: hidden; 就像你已经做过的那样。关闭模式后使主体溢出:自动/滚动。
为了更好地理解，请使用此指南 [类似于 bootstrap 4 ]

document.getElementById('modal-btn').addEventListener('click', function(){
  document.querySelector('.modal').classList.add('active');
  document.body.classList.add('modal-has-opened');
});

document.getElementById('modal-hide').addEventListener('click', function(){
  document.querySelector('.modal').classList.remove('active');
  document.body.classList.remove('modal-has-opened');
})

.modal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  overflow-y: auto;
  
  display: none;
}
.modal.active{
  display: block;
}

.modal-content{
  width: 80%;
  background-color: #fff;
  padding: 50px;
  border: 1px solid #000;
  margin: 1rem auto;
  box-sizing: border-box;
  
}

body{
  background-color: #f4f8ff;
    font-family: segoe ui;
  font-size: 1rem;
  line-height: 1.5;
}
.wp{
  width: 90%;
  margin: 1rem auto;
  background-color: #fff;
  border: 1px solid #000;
  padding: 20px;
  box-sizing: border-box;
}
#modal-btn{
  padding: .25rem 1.25rem;
  font-family: segoe ui;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
}


@media(max-width: 442px){
  .modal-content{
    width: 98%;
  }
}


.modal-has-opened{
  overflow: hidden;
  padding-right: 17px !important;
}

<div class="wp">
  <div class="title">
  I am fine
</div>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
  
  <button id="modal-btn">
    Open Modal
  </button>
</div>

<div class="wp">
  <div class="title">
  I am fine
</div>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>

</div>


<!-- Main Modal -->

<div class="modal">
   <div class="modal-content">
      I am the content
       <button id="modal-hide">
    Close Modal
  </button>
     
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
     </p>
  </div>
</div>