Home > Mobile >  How to stop screen scrolling when popup opens
How to stop screen scrolling when popup opens

Time：11-05

Currently, when you click 'more info' and the popup opens. You are able to scroll and you'll see that the background moves. I want to prevent the ability for scrolling while the popup is opening, what would I do to take care of this issue? I tried playing with overflow:hidden; in CSS but it didn't work for this. I will add a link to my fiddle. http://jsfiddle.net/ctose0Lq/11/

/*=============== SERVICES MODAL ===============*/
const modalViews = document.querySelectorAll('.services__modal'),
  modalBtns = document.querySelectorAll('.services__button'),
  modalClose = document.querySelectorAll('.services__modal-close')

let modal = function(modalClick) {
  modalViews[modalClick].classList.add('active-modal')
}

modalBtns.forEach((mb, i) => {
  mb.addEventListener('click', () => {
    modal(i)
  })
})

modalClose.forEach((mc) => {
  mc.addEventListener('click', () => {
    modalViews.forEach((mv) => {
      mv.classList.remove('active-modal')
    })
  })
})


/*=============== Products MODAL ===============*/
const modalViews2 = document.querySelectorAll('.services__modal'),
  modalBtns2 = document.querySelectorAll('.products__button'),
  modalClose2 = document.querySelectorAll('.services__modal-close')

let modal2 = function(modalClick) {
  modalViews[modalClick].classList.add('active-modal')
}

modalBtns2.forEach((mb, i) => {
  mb.addEventListener('click', () => {
    modal2(i)
  })
})

modalClose2.forEach((mc) => {
  mc.addEventListener('click', () => {
    modalViews2.forEach((mv) => {
      mv.classList.remove('active-modal')
    })
  })
})
/*=============== SERVICES ===============*/

.section__services {
  padding: 4.5rem 0 1rem;
}

.section__title,
.section__subtitle {
  text-align: center;
}

.section__title {
  font-size: 1.55rem;
  color: var(--first-color);
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: .813rem;
  color: black;
}

.container__services {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.grid__services {
  display: grid;
  gap: 1.25rem;
}

.services__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.services__card {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #4769b878), url(../img/blueflower-removebg-preview.webp) no-repeat top center;
}

.services__card2 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #c4bc4893), url(../img/yellowflower-removebg-preview.webp) no-repeat top center;
}

.services__card3 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #b38dd194), url(../img/pinkflower-removebg-preview.webp) no-repeat top center;
}

.services__card4 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #de6d3498), url(../img/salmonflower-removebg-preview.webp) no-repeat top center;
}

.section__services .services__container .services__card,
.section__services .services__container .services__card2,
.section__services .services__container .services__card3,
.section__services .services__container .services__card4 {
  z-index: 1;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
  border: .5px solid #9cd1f5;
}

.services__title {
  font-size: 1.35rem;
  margin-bottom: 2.5rem;
  color: var(--text-color);
  text-align: center;
}

.services__button {
  color: var(--text-color);
  font-size: .9rem;
  display: flex;
  align-items: center;
  column-gap: .25rem;
  cursor: pointer;
  margin-left: 55%;
}

.services__button:hover .services__icon {
  transform: translateX(.25rem);
}

.services__icon {
  font-size: 1rem;
  transition: .4s;
}

.services__modal {
  position: fixed;
  inset: 0;
  background-color: hsla(219, 28%, 16%, 0.7);
  padding: 2rem 1rem;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: .4s;
  z-index: 15;
}

.services__modal-content {
  position: relative;
  background-color: #daeef6;
  padding: 4.5rem 1.5rem 2.5rem;
  border-radius: 1.5rem;
  z-index: 15;
}

.services__modal-title,
.services__modal-description {
  text-align: center;
}

.services__modal-title {
  font-size: 1rem;
  color: var(--first-color);
  margin-bottom: 1rem;
}

.services__modal-description {
  font-size: .813rem;
  margin-bottom: 2rem;
}

.services__modal-list {
  display: grid;
  row-gap: .75rem;
}

.services__modal-item {
  display: flex;
  align-items: flex-start;
  column-gap: .5rem;
}

.services__modal-icon {
  font-size: 1.5rem;
  color: var(--first-color);
  cursor: default;
}

.services__modal-icon-x {
  font-size: 1.5rem;
  color: red;
  cursor: default;
}

.services__modal-info {
  font-size: .913rem;
}

.services__modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;
}

.modal__Z-index {
  z-index: 1000 !important;
}


/*Active modal*/

.active-modal {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 991px) {
  .services__button {
    color: var(--text-color);
    font-size: .9rem;
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
    margin-left: 35%;
  }
}


/* For small devices */

@media screen and (max-width: 375px) {
  .services__container {
    grid-template-columns: repeat(1, 250px);
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 445px) {
  .section__title {
    font-size: 1.35rem;
  }
  .services__modal-info {
    font-size: .7rem;
  }
  .services__container {
    grid-template-columns: repeat(1, 250px);
    justify-content: center;
    text-align: center;
  }
  .section__services {
    padding: 6.5rem 0 1rem;
    margin-top: 25px;
  }
  .services__button {
    color: var(--text-color);
    font-size: .9rem;
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
    margin-left: 55%;
  }
}

@media screen and (max-width: 575px) {
  .specialty_button_center {
    text-align: center;
  }
  .container__partners {
    padding-top: 150px;
  }
}

@media screen and (min-width: 576px) {
  .services__container {
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
  }
  .container__partners {
    padding-top: 80px;
  }
  .services__modal-content {
    width: 500px;
    padding: 4.5rem 2.5rem 2.5rem;
    z-index: 15;
  }
  .services__modal-description {
    padding: 0 3.5rem;
  }
  .specialty__category {
    grid-template-columns: repeat(2, 200px);
    column-gap: 3rem;
  }
  .blog__content {
    grid-template-columns: 450px;
    justify-content: center;
  }
  .machine__content {
    grid-template-columns: 450px;
    justify-content: center;
  }
  .contact__container {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .contact__form {
    width: 380px;
  }
}

@media screen and (min-width: 576px) {
  .services__container {
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
  }
  .services__modal-content {
    width: 500px;
    padding: 4.5rem 2.5rem 2.5rem;
    z-index: 15;
  }
  .services__modal-description {
    padding: 0 3.5rem;
  }
}

@media screen and (min-width: 992px) {
  .section__services {
    padding: 6.5rem 0 1rem;
    margin-top: -100px;
  }
  .services__container {
    grid-template-columns: repeat(3, 272px);
    column-gap: 3rem;
  }
  .container__services {
    margin-left: auto;
    margin-right: auto;
  }
  .services__card {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__car2 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__card3 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__card4 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--=============== REMIXICONS ===============-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

  <!--=============== BOXICONS ===============-->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="assets/css/styles.css">





</head>

<body>



  <!--=============== SERVICES ===============-->


  <section id="whatweprovide" >


    <span >Our Info Cards</span>
    <h2 >What We Provide</h2>

    <div >
      <div >
        <h3 >Test 4</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>




      <div >
        <h3 >Test 3</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>





      <div >
        <h3 >Test 2</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>




      <div >
        <h3 >Test 1</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>



    </div>
  </section>



  <!--=============== Service Cards ===============-->
  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon </h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>






  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon </h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>




  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon</h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>





  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon...</h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>




  <!--=============== Service Cards End ===============-->
  <!--=============== End of SERVICES ===============-->








  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>




  </main>



  <!--=============== GSAP ===============-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>


  <!--=============== MAIN JS ===============-->
  <script src="assets/js/main.js"></script>
</body>

</html>

CodePudding user response：

On the onclick-event, assign a class to the body-element, and assign these properties on to that class:

height: 100%;
overflow: hidden;

This will prevent all scrolling. You'll need to build some logic that removes the class after closing the modal as well. 

/*=============== SERVICES MODAL ===============*/
const modalViews = document.querySelectorAll('.services__modal'),
  modalBtns = document.querySelectorAll('.services__button'),
  modalClose = document.querySelectorAll('.services__modal-close')

let modal = function(modalClick) {
  modalViews[modalClick].classList.add('active-modal')
  document.querySelector('body').classList.add('no-scroll');
}

modalBtns.forEach((mb, i) => {
  mb.addEventListener('click', () => {
    modal(i)
  })
})

modalClose.forEach((mc) => {
  mc.addEventListener('click', () => {
    modalViews.forEach((mv) => {
      mv.classList.remove('active-modal')
    })
  })
})


/*=============== Products MODAL ===============*/
const modalViews2 = document.querySelectorAll('.services__modal'),
  modalBtns2 = document.querySelectorAll('.products__button'),
  modalClose2 = document.querySelectorAll('.services__modal-close')

let modal2 = function(modalClick) {
  modalViews[modalClick].classList.add('active-modal')
}

modalBtns2.forEach((mb, i) => {
  mb.addEventListener('click', () => {
    modal2(i)
  })
})

modalClose2.forEach((mc) => {
  mc.addEventListener('click', () => {
    modalViews2.forEach((mv) => {
      mv.classList.remove('active-modal')
    })
  })
})
.no-scroll {
  height: 100%;
  overflow: hidden;
}


/*=============== SERVICES ===============*/

.section__services {
  padding: 4.5rem 0 1rem;
}

.section__title,
.section__subtitle {
  text-align: center;
}

.section__title {
  font-size: 1.55rem;
  color: var(--first-color);
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: .813rem;
  color: black;
}

.container__services {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.grid__services {
  display: grid;
  gap: 1.25rem;
}

.services__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.services__card {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #4769b878), url(../img/blueflower-removebg-preview.webp) no-repeat top center;
}

.services__card2 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #c4bc4893), url(../img/yellowflower-removebg-preview.webp) no-repeat top center;
}

.services__card3 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #b38dd194), url(../img/pinkflower-removebg-preview.webp) no-repeat top center;
}

.services__card4 {
  padding: 5rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(to top, #bdbcbfba, #de6d3498), url(../img/salmonflower-removebg-preview.webp) no-repeat top center;
}

.section__services .services__container .services__card,
.section__services .services__container .services__card2,
.section__services .services__container .services__card3,
.section__services .services__container .services__card4 {
  z-index: 1;
  box-shadow: 0px 4px 16px rgba(43, 31, 31, 0.228);
  border: .5px solid #9cd1f5;
}

.services__title {
  font-size: 1.35rem;
  margin-bottom: 2.5rem;
  color: var(--text-color);
  text-align: center;
}

.services__button {
  color: var(--text-color);
  font-size: .9rem;
  display: flex;
  align-items: center;
  column-gap: .25rem;
  cursor: pointer;
  margin-left: 55%;
}

.services__button:hover .services__icon {
  transform: translateX(.25rem);
}

.services__icon {
  font-size: 1rem;
  transition: .4s;
}

.services__modal {
  position: fixed;
  inset: 0;
  background-color: hsla(219, 28%, 16%, 0.7);
  padding: 2rem 1rem;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: .4s;
  z-index: 15;
}

.services__modal-content {
  position: relative;
  background-color: #daeef6;
  padding: 4.5rem 1.5rem 2.5rem;
  border-radius: 1.5rem;
  z-index: 15;
}

.services__modal-title,
.services__modal-description {
  text-align: center;
}

.services__modal-title {
  font-size: 1rem;
  color: var(--first-color);
  margin-bottom: 1rem;
}

.services__modal-description {
  font-size: .813rem;
  margin-bottom: 2rem;
}

.services__modal-list {
  display: grid;
  row-gap: .75rem;
}

.services__modal-item {
  display: flex;
  align-items: flex-start;
  column-gap: .5rem;
}

.services__modal-icon {
  font-size: 1.5rem;
  color: var(--first-color);
  cursor: default;
}

.services__modal-icon-x {
  font-size: 1.5rem;
  color: red;
  cursor: default;
}

.services__modal-info {
  font-size: .913rem;
}

.services__modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: var(--title-color);
  cursor: pointer;
}

.modal__Z-index {
  z-index: 1000 !important;
}


/*Active modal*/

.active-modal {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 991px) {
  .services__button {
    color: var(--text-color);
    font-size: .9rem;
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
    margin-left: 35%;
  }
}


/* For small devices */

@media screen and (max-width: 375px) {
  .services__container {
    grid-template-columns: repeat(1, 250px);
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 445px) {
  .section__title {
    font-size: 1.35rem;
  }
  .services__modal-info {
    font-size: .7rem;
  }
  .services__container {
    grid-template-columns: repeat(1, 250px);
    justify-content: center;
    text-align: center;
  }
  .section__services {
    padding: 6.5rem 0 1rem;
    margin-top: 25px;
  }
  .services__button {
    color: var(--text-color);
    font-size: .9rem;
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
    margin-left: 55%;
  }
}

@media screen and (max-width: 575px) {
  .specialty_button_center {
    text-align: center;
  }
  .container__partners {
    padding-top: 150px;
  }
}

@media screen and (min-width: 576px) {
  .services__container {
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
  }
  .container__partners {
    padding-top: 80px;
  }
  .services__modal-content {
    width: 500px;
    padding: 4.5rem 2.5rem 2.5rem;
    z-index: 15;
  }
  .services__modal-description {
    padding: 0 3.5rem;
  }
  .specialty__category {
    grid-template-columns: repeat(2, 200px);
    column-gap: 3rem;
  }
  .blog__content {
    grid-template-columns: 450px;
    justify-content: center;
  }
  .machine__content {
    grid-template-columns: 450px;
    justify-content: center;
  }
  .contact__container {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
  .contact__form {
    width: 380px;
  }
}

@media screen and (min-width: 576px) {
  .services__container {
    grid-template-columns: repeat(2, 200px);
    justify-content: center;
  }
  .services__modal-content {
    width: 500px;
    padding: 4.5rem 2.5rem 2.5rem;
    z-index: 15;
  }
  .services__modal-description {
    padding: 0 3.5rem;
  }
}

@media screen and (min-width: 992px) {
  .section__services {
    padding: 6.5rem 0 1rem;
    margin-top: -100px;
  }
  .services__container {
    grid-template-columns: repeat(3, 272px);
    column-gap: 3rem;
  }
  .container__services {
    margin-left: auto;
    margin-right: auto;
  }
  .services__card {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__car2 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__card3 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
  .services__card4 {
    padding: 5rem 2rem 1.5rem;
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--=============== REMIXICONS ===============-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

  <!--=============== BOXICONS ===============-->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

  <!--=============== CSS ===============-->
  <link rel="stylesheet" href="assets/css/styles.css">





</head>

<body>



  <!--=============== SERVICES ===============-->


  <section id="whatweprovide" >


    <span >Our Info Cards</span>
    <h2 >What We Provide</h2>

    <div >
      <div >
        <h3 >Test 4</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>




      <div >
        <h3 >Test 3</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>





      <div >
        <h3 >Test 2</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>




      <div >
        <h3 >Test 1</h3>

        <span >
                More Info <i class='bx bx-right-arrow-alt services__icon'></i>
            </span>
      </div>



    </div>
  </section>



  <!--=============== Service Cards ===============-->
  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon </h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>






  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon </h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>




  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon</h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>





  <div >
    <div >
      <i class='bx bx-x services__modal-close'></i>

      <h3 >Coming Soon...</h3>
      <p >
        Test Textr skjhte e
      </p>

      <ul >
        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e Test Textr skjhte e
          </p>
        </li>

        <li >
          <i class='bx bx-check services__modal-icon'></i>
          <p >
            Test Textr skjhte e
          </p>
        </li>

      </ul>
    </div>
  </div>




  <!--=============== Service Cards End ===============-->
  <!--=============== End of SERVICES ===============-->








  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>




  </main>



  <!--=============== GSAP ===============-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>


  <!--=============== MAIN JS ===============-->
  <script src="assets/js/main.js"></script>
</body>

</html>

CodePudding user response：

Answer from cssTricks . Just add this class

.scroll-fix {
position:fixed;
overflow-y: hidden;
}

to the <body> tag using JS, when you trigger your function to open the modal.

And remove scroll-fix class from <body> tag on closing the modal.

Page link：https//www.codepudding.com/Mobile/599883.html

Prev:Build failed due to webpack errors nextjs css styles error
Next:How to I convert stringified json to object in java?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding