当模式打开时，网站内容在模式上方滚动

Question

当我打开模式时，模式按钮上方和下方的网站内容也会在模式上滚动。

我尝试增加z-index并应用溢出属性，但这没用。

<a class=" read-more low-padding raised modal-trigger " data-modal="card-modal">Learn More<i class="im im-icon-Right"></i></a>

<div style="z-index: 99999999999999999999;"> 
  <div id="card-modal" class="modal modal-sm b1" style="overflow-y: hidden">
    <div class="modal-background"></div>
    <div class="modal-card modal-content">
      <header class="modal-card-head">
        <p class="modal-card-title">Tracks</p>
        <button class="delete is-medium modal-dismiss" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <!-- User -->
        <div class="flex-card light-bordered hover-inset padding-10 mb-10">
          <div class="content content-flex">
            <div class="card-avatar">
              <img src="assets/images/ml.png">
            </div>
            <div class="card-name">
              <div class="name">Machine Learning</div>
              <!--<div class="position">Software Engineer</div>-->
            </div>
            <!-- 
            <div class="card-select ml-auto">
              <i class="material-icons">done</i>
            </div>
            -->
          </div>
        </div>
        <!-- /User -->
        <!-- User -->
        <div class="flex-card light-bordered hover-inset padding-10 mb-10">
          <div class="content content-flex">
            <div class="card-avatar">
              <img src="assets/images/appdev.png">
            </div>
            <div class="card-name">
              <div class="name">Mobile App Development</div>
              <!--<div class="position">Sales Representative</div>-->
            </div>
            <!--
            <div class="card-select ml-auto">
              <i class="material-icons">done</i>
            </div>
            -->
          </div>
        </div>
        <!-- /User -->
        <!-- User -->
        <div class="flex-card light-bordered hover-inset padding-10 mb-10">
          <div class="content content-flex">
            <div class="card-avatar">
              <img src="assets/images/coding.png">
            </div>
            <div class="card-name">
              <div class="name">Generic Coding</div>
              <!--<div class="position">Accountant</div>-->
            </div>
            <!-- 
            <div class="card-select ml-auto">
              <i class="material-icons">done</i>
            </div>
            -->
          </div>
        </div>
        <!-- /User -->
        <!-- User -->
        <div class="flex-card light-bordered hover-inset padding-10 mb-10">
          <div class="content content-flex">
            <div class="card-avatar">
              <img src="assets/images/webdev.png">
            </div>
            <div class="card-name">
              <div class="name">Web Development</div>
              <!--<div class="position">Software Engineer</div>-->
            </div>
            <!-- 
            <div class="card-select ml-auto">
              <i class="material-icons">done</i>
            </div>
            -->
          </div>
        </div>
        <!-- /User -->
        <!-- User -->
        <div class="flex-card light-bordered hover-inset padding-10 mb-10">
          <div class="content content-flex">
            <div class="card-avatar">
              <img src="assets/images/cyber.png">
            </div>
            <div class="card-name">
              <div class="name">Cyber Security</div>
              <!-- <div class="position">CTO</div>-->
            </div>
            <!--
            <div class="card-select ml-auto">
               <i class="material-icons">done</i>
            </div>
            -->
          </div>
        </div>
        <!-- /User -->
      </section>
      <footer class="modal-card-foot">
        <button class="button is-link modal-dismiss">Close</button>
        <!--<button class="button btn-align raised accent-btn no-lh modal-dismiss save-btn is-disabled">Save</button> -->
      </footer>
    </div>
  </div>
</div>

<!-- Featured image -->
<div class="column is-6 is-offset-1 has-text-centered is-hidden-mobile">
  <img class="featured-drawing" src="assets/images/illustrations/drawings/gauge.png" alt="">
</div>

打开模态时，仅应显示模态的内容。网页的内容不应滚动到模式上方。