当前，当您单击"更多信息"时，弹出窗口打开。你可以滚动，你会看到背景在移动。我想阻止在弹出窗口打开时滚动的能力，我该怎么处理这个问题？我试着在CSS中使用overflow:hidden;，但它不起作用。我将在我的小提琴上添加一个链接。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/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!--=============== BOXICONS ===============-->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<!--=============== SERVICES ===============-->
<section id="whatweprovide" class="services section__services">
<span class="section__subtitle">Our Info Cards</span>
<h2 class="section__title">What We Provide</h2>
<div class="services__container container__services grid__services">
<div class="services__card">
<h3 class="services__title">Test 4</h3>
<span class="services__button">
More Info <i class='bx bx-right-arrow-alt services__icon'></i>
</span>
</div>
<div class="services__card2">
<h3 class="services__title">Test 3</h3>
<span class="services__button">
More Info <i class='bx bx-right-arrow-alt services__icon'></i>
</span>
</div>
<div class="services__card3">
<h3 class="services__title">Test 2</h3>
<span class="services__button">
More Info <i class='bx bx-right-arrow-alt services__icon'></i>
</span>
</div>
<div class="services__card4">
<h3 class="services__title">Test 1</h3>
<span class="services__button">
More Info <i class='bx bx-right-arrow-alt services__icon'></i>
</span>
</div>
</div>
</section>
<!--=============== Service Cards ===============-->
<div class="services__modal modal__Z-index">
<div class="services__modal-content">
<i class='bx bx-x services__modal-close'></i>
<h3 class="services__modal-title">Coming Soon </h3>
<p class="services__modal-description">
Test Textr skjhte e
</p>
<ul class="services__modal-list">
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
</ul>
</div>
</div>
<div class="services__modal .modal__Z-index">
<div class="services__modal-content">
<i class='bx bx-x services__modal-close'></i>
<h3 class="services__modal-title">Coming Soon </h3>
<p class="services__modal-description">
Test Textr skjhte e
</p>
<ul class="services__modal-list">
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
</ul>
</div>
</div>
<div class="services__modal modal__Z-index">
<div class="services__modal-content">
<i class='bx bx-x services__modal-close'></i>
<h3 class="services__modal-title">Coming Soon</h3>
<p class="services__modal-description">
Test Textr skjhte e
</p>
<ul class="services__modal-list">
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
</ul>
</div>
</div>
<div class="services__modal modal__Z-index">
<div class="services__modal-content">
<i class='bx bx-x services__modal-close'></i>
<h3 class="services__modal-title">Coming Soon...</h3>
<p class="services__modal-description">
Test Textr skjhte e
</p>
<ul class="services__modal-list">
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
Test Textr skjhte e Test Textr skjhte e
</p>
</li>
<li class="services__modal-item">
<i class='bx bx-check services__modal-icon'></i>
<p class="services__modal-info">
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>只需在点击事件上设置document.body.style.overflow = 'hidden'(在addEventListener('click', () => {...})内(。
尝试以下JavaScript代码：
/*=============== 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)
document.body.style.overflow = 'hidden'
})
})
modalClose.forEach((mc) => {
mc.addEventListener('click', () => {
document.body.style.overflow = 'auto'
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)
document.body.style.overflow = 'hidden'
})
})
modalClose2.forEach((mc) => {
mc.addEventListener('click', () => {
document.body.style.overflow = 'auto'
modalViews2.forEach((mv) => {
mv.classList.remove('active-modal')
})
})
})