Hi There;
I’m editing a simple fixed header smooth scrolling template with a full screen text / image modal, and a full screen video modal. I have z-index 1 and 2. the modal is fine on mobile. However, on my windows computer, I’m seeing 2 scrollbars (the site, and the modals). The current modal css is @ (modal-test.css) in the 000 directory. How can I get this modal to only show the modal scrollbar. Thanks!
This forum Doesn’t appear to allow me to send a link. What’s the link button for?
1 Like
Teller
January 27, 2025, 8:40pm
2
Welcome to the forum @FavorMan
So the forum can assist please post your full code.
Use the following method to post code to the forum:
On a separate line type three back ticks.
On a separate line paste your code.
On the last line type three back ticks. Here is a single back tick `
There are limitations placed on new users, such as not posting links. This is for your safety and the forum’s. As you spend time on the forum and gain trust levels you will gain access to more features such as posting links.
Happy coding
Teller:
`
/* z-index: 1 is in the fixed header css */
.arc-modals img {
margin-top: 10px;
}
#modal-toggle-1, #modal-toggle-2 {
position: relative;
visibility: hidden;
opacity: 0;
z-index-OFF: 3;
}
#modal-toggle-1:checked ~ dialog {
display: block;
}
#modal-toggle-2:checked ~ dialog {
display: block;
}
.arc-modals label {
display: block;
margin: 0 auto;
background: #663399;
color: #FFF;
font: 700 16px Arial;
text-align: center;
width: 250px;
margin-bottom: 15px;
padding: .5em 1em;
border-radius: 4px;
}
.arc-modals label:hover {
background: #4169E1;
color: #FFF;
}
.arc-modals dialog {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
margin: 0 auto;
font: 700 16px Arial;
text-align: center;
color: #4169E1;
background: #C0C0C0;
/* animation: flip / bounce / appear */
animation: flip 350ms ease-in 1;
border: none;
width: 100%;
height: 100%;
/* ADJUST padding: PER TEMPLATE */
padding: 75px 5px 0 5px;
overflow-y1: initial;
overflow-y: auto;
z-index: 2;
}
.arc-modals dialog p {
margin-bottom: 15px;
}
.modal-scrolling-OFF {
/*position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;*/
overflow-y: auto;
height: 100%;
}
@keyframes appear {
0% {
opacity: 0;
transform: translateY(-100px);
}
}
.arc-video-modal .modal-video-header {
display: block;
margin: 0 auto;
transition: all 200ms;
font: 700 20px Arial;
text-align: center;
background: #4169E1;
color: #FFF;
width: 650px;
height: 35px;
margin-top: 15px;
padding-top: 10px;
text-decoration: none;
}
.arc-video-modal .modal-video {
display: block;
margin: 0 auto;
width: 650px;
height: 400px;
margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
.arc-video-modal .modal-video-header {
display: block;
margin: 0 auto;
transition: all 200ms;
font: 700 20px Arial;
text-align: center;
background: #4169E1;
color: #FFF;
width: 250px;
height: 50px;
margin-top: 10px;
padding-top: 5px;
text-decoration: none;
}
.arc-video-modal .modal-video {
display: block;
margin: 0 auto;
width: 250px;
height: 150px;
margin-bottom: 15px;
}
}
Thanks!
Teller
January 27, 2025, 9:02pm
4
Please also post the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Editing</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pop-up-modals-OFF.css">
<link rel="stylesheet" href="modal-test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav class="navigation-bar js-hide-page-index">
<!-- ☰ (OPEN MOBILE MENU) -->
<span class="toggle-button animated pulse infinite">☰</span>
<a href="#page-hero" class="logo animated fadeIn infinite">TOP LOGO<br>200 X 50</a>
<ul class="main-menu">
<!-- <li class="menu-item"><a href="#">Home</a></li> -->
<li class="menu-item has-submenu-OFF"><a tabindex="0">ABOUT US +</a>
<ul class="submenu">
<li class="submenu-item"><a href="#about">ABOUT US</a></li>
<li class="submenu-item"><a href="#">WHY US</a></li>
<li class="submenu-item"><a href="#">OUR TEAM</a></li>
<li class="submenu-item"><a href="#">Q & A</a></li>
</ul>
</li>
<li class="menu-item has-submenu-OFF"><a tabindex="0">OUTREACHES +</a>
<ul class="submenu">
<li class="submenu-item"><a href="#">STREET OUTREACH</a></li>
<li class="submenu-item"><a href="#">PRISION OUTREACH</a></li>
<li class="submenu-item"><a href="#">SENIORS OUTREACH</a></li>
<li class="submenu-item"><a href="#">FALSE FLAG OUTREACH</a></li>
</ul>
</li>
<li class="menu-item has-submenu-OFF"><a tabindex="0">CONTACT US +</a>
<ul class="submenu">
<li class="submenu-item"><a href="#">CONTACT FORM</a></li>
<li class="submenu-item"><a href="#">CONTACT INFO</a></li>
<li class="submenu-item"><a href="#">OUR LOCATION</a></li>
<li class="submenu-item"><a href="#">WHATEVER</a></li>
</ul>
</li>
<!-- <li class="menu-item"><a href="#">About Us</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li> -->
</ul>
</nav>
<!-- START PAGE HERO -->
<div id="page-hero" class="animated flip">
<div class="page-hero-name">
PAGE HERO NAME
</div>
<div class="page-hero-tagline">
PAGE HERO TAGLINE
</div>
<!-- START MODALS -->
<div class="arc-modals">
<!--TEXT / IMAGE MODAL -->
<div class="arc-text-image-modal">
<input type="checkbox" id="modal-toggle-1">
<label for="modal-toggle-1">Open Text / Image Modal</label>
<dialog>
<div class="modal-scrolling">
<label for="modal-toggle-1">Shut Text / Image Modal</label>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit 123 456 aliquam est iusto!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit 123 456 aliquam est iusto!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit 123 456 aliquam est iusto!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit 123 456 aliquam est iusto!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nihil dolore similique quis qui ad blanditiis ex eum! Enim maiores ipsam fugiat officiis earum distinctio natus reprehenderit 123 456 aliquam est iusto!</p>
<label for="modal-toggle-1">Shut Text / Image Modal</label>
</div>
</dialog>
</div>
<!-- VIDEO MODAL -->
<div class="arc-video-modal">
<input type="checkbox" id="modal-toggle-2">
<label for="modal-toggle-2">Open Video Modal</label>
<dialog>
<div class="modal-scrolling">
<label for="modal-toggle-2">Shut Video Modal (X)</label>
<div class="modal-video-header">Modal Video Header WhooHoo!!!</div>
<iframe class="modal-video" src="https://youtube.com/embed/cO3CU_6jHQQ" frameborder="0"
allow="accelerometer; encrypted-media"></iframe>
<label for="modal-toggle-2">Shut Video Modal (X)</label>
</div>
</dialog>
</div>
</div> </div>
<!-- END PAGE HERO -->
<div id="about" class="page-id"><p>ABOUT US</p>
<p>ABOUT US 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</p>
<p><img src="https://placehold.co/250x200/663399/C0C0C0/png"></p>
<p>ABOUT US</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="script.js"></script>
<script src="modal-test.js"></script>
<script>
// .js-hide-page-index Runs With jQuery 3.7.1
// Select all »a« elements with a parent class »links« and add a function that is executed on click
$( '.js-hide-page-index a' ).on( 'click', function(e){
// Define variable of the clicked »a« element (»this«) and get its href value.
var href = $(this).attr( 'href' );
// Run a scroll animation to the position of the element which has the same id like the href value.
$( 'html, body' ).animate({
scrollTop: $( href ).offset().top
}, '300' );
// Prevent Page Indexes From Shown In Browser Toolbars When Smooth Scrolling Up And Down The Page.
e.preventDefault();
});
</script>
<script>
document.getElementById("menu-item").onclick = function ()
{
document.getElementById ("check").check = false;
};
</script>
</body>
</html>
Teller
January 27, 2025, 9:50pm
6
That is not a valid property.
`
Yes, I don’t appear to need that. That was part of testing.
`
ILM
January 27, 2025, 9:56pm
8
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Teller:
`
I’ve been copy / paste Backsticks from a reply from Teller. I can use the </> button.
Let’s Ignore the (z-index-OFF: 3). How can I get the modal scrollbar to be the Only scrollbar to show on computers, when opening modals? I Don’t want the page scrollbar to show when the modals are open.
Please only place code in codeblocks. Text in codeblocks is much harder to read
Okay, Thanks for the info.
Teller
January 27, 2025, 11:19pm
13
Try setting the body overflow-y property to hidden
Body overflow-y hidden helps with only showing the modal scrollbar. However, I need the page body to scroll when the modals Aren’t open.
Teller
January 27, 2025, 11:35pm
15
Could you do that in an at-media rule?
lasjorg
January 28, 2025, 12:03am
17
Add box-sizing: border-box or remove the width: 100% on the dialog element.
At the top of the main CSS add.
* {
box-sizing: border-box;
}
Edit: you shouldn’t need to hide the overflow on body with that added, or the width removed, but you really should use box-sizing: border-box no matter what as it is almost always preferable to use.
I already had the below. Removing the dialog width Didn’t appear to help.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
Also, I added the below JS. After opening a modal, then the body stays frozen.
* {
<script>
$(document).ready(()=>{
$("#modal-toggle-1").click(function () {
$("#dialog").toggleClass("body-scroll-hidden");
if ($("#dialog").hasClass("body-scroll-hidden")) {
// Enable Scroll
$("body").css('overflow', "auto");
} else {
// Disable Scroll
$("body").css('overflow', "hidden");
}
});
});
</script>
Now I tested the below JS on Firefox, and on Brave using my Windows 11, and my Android. That is a Success! I re added 100% width to the dialog CSS. I prefer the Whole page being covered by modals. How can I also get (.modal-toggle-2) in that JS? And on Brave, the site page shows After the modal. And on Firefox, the site page Doesn’t show after the modal. I like the Firefox version better.
<script>
$(document).ready(()=>{
$("#modal-toggle-1").click(function () {
$("#dialog").toggleClass("hidden");
$('body').toggleClass('stop-scroll');
});
});
</script>
lasjorg
January 28, 2025, 7:06pm
20
Then you have something else overflowing. With the code you posted, all I have to do is set the box-sizing. Also, all removing the width does is remove the overflow it is causing without box-sizing. It is still a full width block-level element without the 100% width set.
