Hi There,
Since I’m new to this forum site, I somehow stopped getting responses.
My newest CSS modal looks Great, and I figured out how to hide the body scroll bar, so that Doesn’t interfere with the modal scrollbar. I still need to get this modal to cover the fixed header, and I’d like to Disable the page after the modal is scrolled through. I only want the page to show after the modal is shut.
On CodePen, I have the modal covering a fixed header! However, on 2 other site templates that I’m using, the modal Isn’t yet covering the fixed header. There must be a Easy Quick fix! Me spending several hours on this Doesn’t appear to be going anywhere. At least one person please help me with a solution! Below is All the HTML and CSS so far for one of the templates. Thanks!
<!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="#">PRISON 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>
<div class="arc-modals">
<a href="#modal-1" class="open-modal-btn-1">Box 1</a>
<div id="modal-1" class="modal-dialog">
<div class="arc-modal-1">
<a href="" title="SHUT Modal" class="shut-arc-modal">(X) </a>
<h2>TEXT / IMAGE MODAL</h2>
<p>This Is A Text / Image Modal. This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
<p>This Is A Text / Image Modal. This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
<p>This Is A Text / Image Modal. This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
</div></div>
<!-- END ARC TEXT / IMAGE MODAL -->
<!-- START ARC VIDEO MODAL -->
<a href="#modal-2" class="open-modal-btn-2">Box 2</a>
<div id="modal-2" class="modal-dialog">
<div class="arc-modal-2">
<a href="" title="SHUT MODAL" class="shut-arc-modal">(X) </a>
<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>
<p>This Is A Intro Video Modal! On Small Screens, The Video Displays @ 250px By 150px. On Other Screens, The Video Shows @ 650px By 400px. Videos Can Be Loaded From A Number Of Video Platforms! NOTE! Some Video Platforms Add BAD SPY TRACKERS To Your Site! I ONLY Added Y T On Here For Demo Purposes.</p>
</div></div>
</div>
<!-- END ARC VIDEO MODAL -->
<!-- END BOTH ARC MODALS -->
</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 Clicks
$( '.js-hide-page-index a' ).on( 'click', function(e){
// Define Variable Of The Clicked »a« Element (»this«) And Get The HREF Value.
var href = $(this).attr( 'href' );
// Run A Scroll Animation To The Position Of The Element That Has The Same ID Like The HREF Value.
$( 'html, body' ).animate({
scrollTop: $( href ).offset().top
}, '300' );
// STOP Page Indexes From Showing In Browser Toolbars When Smooth Scrolling Up And Down The Page.
e.preventDefault();
});
</script>
<!-- LOOKING FOR A AUTO SHUT ON MOBILE SCROLL SCRIPT -->
<script>
document.getElementById("main-menu").onclick = function ()
{
document.getElementById ("check").check = false;
};
</script>
</body>
</html>
/* Main CSS So Far */
html,
body {
/* Firefox */
scrollbar-width: none;
/* IE 10+ */
-ms-overflow-style: none;
}
/* WebKit - Safari, Chrome, Opera */
body::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Basic Styles Starts */
/* Reset Style */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Default Typography */
body {
font: 700 15px 'Arial', Sans-Serif;
overflow-x: hidden;
}
html {
scroll-behavior: smooth;
}
/* Navigation Bar */
.navigation-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: #C0C0C0;
padding1: 10px 10px;
opacity: 1;
z-index: 1;
}
/* List Items */
.main-menu, .submenu-item {
list-style-type: none;
}
/* Anchor Tags */
.logo {
background: #4169E1;
color: #FFF;
width: 200px;
height: 50px;
text-decoration: none;
cursor: pointer;
}
.menu-item a {
background: Transparent;
color: #FFF;
height: 50px;
text-decoration: none;
cursor: pointer;
}
/* Basic Styles Ends */
/* Adding Styles to Logo and Menu Items Start */
.logo {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font: 700 15px 'Arial', Sans-Serif;
margin-left1: 20px;
}
.menu-item {
background: #663399;
text-align: center;
padding: 12px 0;
}
.menu-item:hover {
background: #4169E1;
color: #C0C0C0;
text-align: center;
padding: 12px 0;
}
.menu-item:active {
background: #4169E1;
color: #C0C0C0;
text-align: center;
padding: 12px 0;
}
/* Adding Styles to Logo and Menu Items Ends */
/* Sytles for the Toggle Button Start */
.toggle-button {
position: absolute;
float: right;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: #663399;
color: #FFF;
width: 50px;
height: 50px;
font-size: 25px;
font-weight: bold;
cursor: pointer;
}
.toggle-button:hover {
color: #C0C0C0;
}
.main-menu {
display: none;
}
.active.main-menu {
display: block;
}
/* Sytles for the Toggle Button Ends */
/* Adding Styles to Submenu Starts */
.has-submenu > a::after {
content: "\2B9F"; /* 2B9F */
}
.submenu-item a {
display: inline-block;
padding-top: 12px;
color: #FFF;
}
.submenu-item a:hover {
color: #C0C0C0;
}
.submenu {
display: none;
color-OFF: #FFF;
}
.submenu-active .submenu {
display: block;
}
.submenu-active {
background: #663399;
}
/* Adding Styles to Submenu Ends */
/* For Desktop Start */
@media screen and (min-width: 768px) {
/* Hide Toggle */
.toggle-button {
display: none;
}
/* Make Menu Visible */
.main-menu {
display: block;
}
/* Style Navigation Bar Start*/
.navigation-bar {
display: flex;
justify-content: center;
align-items: center;
padding-right: 5px;
}
.main-menu {
display: flex;
}
.menu-item {
position: relative;
display: block;
background: #663399;
margin-left: 20px;
font: 700 15px 'Arial', Sans-Serif;
width: 200px;
height: 50px;
}
/* Style Navigation Bar End*/
/* Style Active Submenu */
.submenu-active {
background: #663399;
color: #FFF;
}
.submenu-active .submenu {
position: absolute;
right: 0;
top: 50px;
background: #4169E1;
padding: 0 20px 20px 20px;
width: 200px;
text-align: center;
}
.submenu-active .submenu:hover {
background: #4169E1;
}
/* Hover Style */
.logo:hover {
color: #FFF;
background: #4169E1;
}
.menu-item:hover {
background: #4169E1;
color: #C0C0C0;
}
.menu-item a:hover {
background: Transparent;
color: #C0C0C0;
}
}
/* For Desktop Ends */
.page-id {
position: relative;
min-height: 100vh;
max-width: 100%;
display: block;
justify-content1: center;
margin: 0 auto;
top1: 25px;
margin-top1: 25px;
padding: 75px 5px 0 5px;
font: 700 15px 'Arial', Sans-Serif;
text-align: center;
background: #FFF;
color: #4169E1;
}
.page-id p {
margin-bottom: 15px;
}
#page-hero {
display: flex;
flex-direction: column;
justify-content: normal;
align-items: center;
text-align: center;
background-image: linear-gradient(rgba(65, 105, 225, 0.7), rgba(65, 105, 225, 0.7)), url("https://images.pexels.com/photos/2234006/pexels-photo-2234006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
.page-hero-name {
font: 700 28px Arial;
color: #663399;
margin-top: 100px;
}
.page-hero-tagline {
font: 700 24px Arial;
color: #FFF;
margin-top: 10px;
margin-bottom: 15px;
}
/* Modal CSS */
.arc-modals {
display: block;
margin: 0 auto;
}
.arc-modals .open-modal-btn-1,
.arc-modals .open-modal-btn-2 {
display: block;
margin: 0 auto;
width: 200px;
background: #4169E1;
color: #C0C0C0;
font: 700 16px Arial;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
padding: 5px;
}
.arc-modals .open-modal-btn-1:hover,
.arc-modals .open-modal-btn-2:hover {
background: #663399;
color: #C0C0C0;
}
.arc-modals .open-modal-btn-1 {
/* ADJUST margin-top: PER TEMPLATE */
margin-top: 75px;
margin-bottom: 10px;
}
.arc-modals .open-modal-btn-2 {
margin-bottom: 10px;
}
.arc-modals .modal-dialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: #C0C0C0;
font: 700 16px Arial;
/* CENTER MODAL TEXT / IMAGES */
text-align: center;
opacity: 0;
overflow-y: auto;
overflow-x: hidden;
pointer-events: none;
}
.arc-modals .modal-dialog:target {
pointer-events: auto;
padding-bottom: 5px;
/* animation: flip / bounce / appear */
animation: appear 350ms ease-in 1;
height: 100vh;
opacity: 1;
/* MAKE THIS z-index: A HIGHER NUMBER THAN THE FIXED HEADER! */
z-index: 2;
}
.arc-modals .modal-dialog > div {
position: relative;
top: 0;
margin: 0 auto;
width: 100%;
height: 100vh;
/* ADJUST PADDING TOP PER TEMPLATE */
padding: 90px 0 0 0;
}
.arc-modals .modal-dialog p {
color: #4169E1;
font: 700 16px Arial;
width: 100%;
margin-bottom: 25px;
/* ADJUST padding: PER TEMPLATE */
padding: 0 5px 25px 5px;
}
.arc-modals .modal-dialog h2 {
color: #663399;
font: 700 20px Arial;
margin-bottom: 25px;
}
.arc-modals .modal-dialog a {
color: #663399;
}
.arc-modals .shut-arc-modal {
position: fixed;
float: right;
/* ADJUST top: PER TEMPLATE */
top: 50px;
right: 0;
left: 0;
bottom: 0;
background: #C0C0C0;
color: #663399;
text-align: right;
width: 100%;
/* ADJUST height: PER TEMPLATE */
height: 35px;
text-decoration: none;
font: 700 20px Arial;
/* ADJUST padding-top: PER TEMPLATE */
padding-top: 9px;
margin-right: -20px;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: 0;
}
.arc-modals .shut-arc-modal:hover {
background: #C0C0C0;
color: #4169E1;
}
/* Width */
.arc-modals ::-webkit-scrollbar {
width: 5px;
}
/* Track */
.arc-modals ::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #C0C0C0;
margin-top: 35px;
border-radius: 10px;
}
/* Handle */
.arc-modals ::-webkit-scrollbar-thumb {
background: #4169E1;
border-radius: 10px;
}
/* Handle On Hover */
.arc-modals ::-webkit-scrollbar-thumb:hover {
background: #663399;
}
/* .arc-modals .body-scroll-hidden {
display: none;
}
.arc-modals .hide-body-scroll {
overflow: hidden;
} */
.arc-modals .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: 25px;
padding-top: 7px;
text-decoration: none;
}
.arc-modals .modal-video {
display: block;
margin: 0 auto;
width: 650px;
height: 400px;
margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
.arc-modals .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: 25px;
padding-top: 5px;
text-decoration: none;
}
.arc-modals .modal-video {
display: block;
margin: 0 auto;
width: 250px;
height: 150px;
margin-bottom: 15px;
}
}
@keyframes appear {
0% {
opacity: 0;
transform: translateY(-100px);
}
}