It was this, right?
body:has(.modal.open) {
overflow: hidden;
}
But I don’t know how I would implement it here: https://jsfiddle.net/o6me7tbw/
Because it is a different modal code.
It was never implemented on the code that uses buttons.
Was the example you gave: Post# 6
But the other code uses buttons, so I do not know how it would be done on there.
Modal code that uses buttons:
css
.containerB {
/*display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;*/
/* Enable scroll if needed */
display: flex;
min-height: 100vh;
justify-content: center;
flex-direction: column;
margin-top: auto;
}
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
background: rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
transform: translate(0, -25%);
opacity: 0;
pointer-events: none;
z-index: -99;
overflow: auto;
border-radius: 50%;
}
.modal.active {
/* display: flex;*/
opacity: 1;
transform: scale(1);
z-index: 1000;
pointer-events: initial;
border-radius: 0;
overflow: auto;
}
html
<div class="containerB">
<div class="modal-content">
<div class="buttonContainerA">
<button data-destination="#ba" class="playButtonA btn-primary btn">Listening</button>
<button data-destination="#bb" class="playButtonA btn-primary btn">Live Performance</button>
<button data-destination="#bc" class="playButtonA btn-primary btn">On Loop</button>
<button data-destination="#bd" class="playButtonA btn-primary btn">Audio Visual</button>
<button data-destination="#be" class="playButtonA btn-primary btn">Lyric Video</button>
<button data-destination="#bf" class="playButtonA btn-primary btn">Music Video</button>
<button data-destination="#bg" class="playButtonA btn-primary btn">From The Vault</button>
<button data-destination="#bh" class="playButtonA btnq">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 856 856">
<path fill="#000" d="M 856 0 H 856 V 856 H 0 L 0 0 H 856" />
<path fill="#1155cc" d="M79.4,816.3c-21,0-38-17-38-37.9c0-21.1,16.9-38.1,38-38.1c20.9,0,37.9,17,37.9,38.1
C117.3,799.3,100.4,816.3,79.4,816.3" />
<path fill="#1155cc" d="M79.4,115.7c-21,0-38-17-38-38s16.9-38,38-38c20.9,0,37.9,17,37.9,38S100.4,115.7,79.4,115.7" />
<path fill="#1155cc" d="M513.6,766.6c0,0.8-0.8,1.5-1.6,1.5H344.2c-0.8,0-1.5-0.7-1.5-1.5V658.2c0-0.9,0.7-1.7,1.5-1.7H512
c0.8,0,1.6,0.7,1.6,1.7V766.6z" />
<path fill="#1155cc" d="M722,403.4c0,0.4-0.2,0.7-0.4,1.1l-75.2,76.4c-0.4,0.3-0.8,0.4-1.2,0.4H532.1l-18.5,18.5v96.9
c0,1-0.8,1.7-1.6,1.7H344.2c-0.8,0-1.5-0.7-1.5-1.7V447.9c0-0.4,0.1-0.8,0.4-1.1l75.1-76.4c0.3-0.3,0.7-0.5,1.1-0.5h113.2
l18.6-18.6V239.7l-18.6-18.6H323.6l-18.5,18.6v113.5c0,0.8-0.7,1.5-1.5,1.5H135.8c-1,0-1.6-0.7-1.6-1.5V190.8c0-0.3,0.2-0.7,0.4-1
l77.1-79.6c0.3-0.3,0.7-0.4,1.2-0.4h430.5c0.4,0,0.8,0.2,1.2,0.4l76.9,79.6c0.2,0.2,0.4,0.7,0.4,1V403.4z" />
<path fill="#1155cc" d="M776.9,816.3c-20.9,0-38.2-17-38.2-37.9c0-21.1,17.2-38.1,38.2-38.1c20.9,0,38,17,38,38.1
C814.9,799.3,797.8,816.3,776.9,816.3" />
<path fill="#1155cc" d="M776.9,115.7c-20.9,0-38.2-17-38-38s17.2-38,38.2-38c20.9,0,38,17,38,38S797.8,115.7,776.9,115.7" />
</svg>
</button>
<button data-destination="#bi" class="playButtonA btn-primary btn">Cover</button>
<button data-destination="#bj" class="playButtonA btn-primary btn">Remix</button>
<button data-destination="#bk" class="playButtonA btn-primary btn">Instrumental</button>
<button data-destination="#bl" class="playButtonA btn-primary btn">Extended Mix</button>
<button data-destination="#bm" class="playButtonA btn-primary btn">Duet</button>
<button data-destination="#bn" class="playButtonA btn-primary btn">Acoustic</button>
<button data-destination="#bo" class="playButtonA btn-primary btn">Rework</button>
</div>
<button class="exitB exit" type="button" title="Exit" aria-label="Close"></button>
</div>
<div id="ba" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonA"></div>
</div>
<div class="buttonA"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bb" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonB"></div>
</div>
<div class="buttonB"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bc" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonC"></div>
</div>
<div class="buttonC"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bd" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonD"></div>
</div>
<div class="buttonD"></div>
<div class="curtainB"> </div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="be" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonE"></div>
</div>
<div class="buttonE">
</div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bf" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonF"></div>
</div>
<div class="buttonF"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bg" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonG"></div>
</div>
<div class="buttonG"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bh" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonH"></div>
</div>
<div class="buttonH"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bi" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonI"></div>
</div>
<div class="buttonI"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bj" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonJ"></div>
</div>
<div class="buttonJ"></div>
<div class="curtainB"> </div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bk" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonK"></div>
</div>
<div class="buttonK"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bl" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonL"></div>
</div>
<div class="buttonL"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bm" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonM"></div>
</div>
<div class="buttonM"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bn" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonN"></div>
</div>
<div class="buttonN"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
<div id="bo" class="modal">
<div class="inner-modal">
<div class="ratio-keeper">
<div class="wrapB">
<div class="video buttonO"></div>
</div>
<div class="buttonO"></div>
<div class="curtainB"></div>
</div>
<button class="close exit">×</button>
</div>
</div>
</div>