There's a website I've created. I want to hide the body after the pop up model opens. How can I do it?

Question

1.00/5 (1 vote)

See more:

<!DOCTYPE html>
<html>
<head>

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

	<title>Flumina</title>

	<link rel="stylesheet" type="text/css" href="css/all.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="css/media.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet"> 

 	
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
@font-face {
	font-family: myFirstFont;
	src: url(../fonts/Ubuntu-Th.ttf);
  }

html, body{
	margin: 0;
	padding: 0;
	background-color: #fff;
	overflow-x: hidden;
}

body{
	font-family: myFirstFont;
	font-weight: 100;
}

.noscroll{
	overflow: hidden;
}

.overlay{
	position: fixed;
	overflow-y: scroll;
}

[aria-hidden="true"] { display: none; }
[aria-hidden="false"] { display: block; }

/* Animation */

#particleCanvas {
    position: fixed;
    top: 8vmin;
    left: 0;
    height: calc(100% - 16vmin);
    width: 100%;
    opacity: 1;
    z-index: 5;
}

#particleCanvas::before {
    animation-name: enlighten;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

/* -------------------top bar---------------- */

.alert-light{
	background-color: transparent !important;
	border-color: transparent !important;
}

.top-bar-link{
	text-align: right;
	z-index: 10;
}

.top-bar span{
	font-size: 18px;
	padding: 15px 20px;
	font-family: myFirstFont;
	/*background-color: #C4C4C4;*/
}

.top-bar span a{
	color: inherit;
	text-decoration: none;
}

/* -------------------top bar---------------- */

/* -------------------nav bar----------------- */

.logo img{
      position: absolute;
      float: left;
      margin: 0px 46px;
      width: 103px;
      height: 103px;
      left: 67px;
      top: 0px;
      margin-top: -40px;
      margin-left: 100px;
}

nav {
      position: absolute;
      width: 100%;
      line-height: 60px;
	  z-index: 6;
}

nav ul {
      line-height: 60px;
      list-style: none;  
      overflow: hidden;
      padding: 0;
      text-align: center;
      margin: 0;
      padding-right: 40px;
      transition: 1s;
	  cursor: pointer;
}


nav ul li {
      display: inline-block;
      padding: 0px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #010A2D;
    font-size: 24px;
	font-weight: lighter;
    font-family: myFirstFont;
}

nav ul li.active a:after{
	text-decoration: none;
	color: #C01466;
	content: '';
    background: #C01466;
    display: block;
    height: 3px;
    width: calc(100%);
    margin: -5px auto 5px;
	transition: height 250ms;
	transform-origin: bottom right;
  	transition: transform 0.25s ease-out;
}

nav ul li a:hover:after{
	text-decoration: none;
	color: #C01466;
	content: '';
    background: #C01466;
    display: block;
    height: 3px;
    width: calc(100%);
    margin: -5px auto 5px;
	transition: height 250ms;
	transform: scaleX(1);
  	transform-origin: bottom left;
}
/* 
nav ul li a:hover{
	text-decoration: none;
	color: #C01466;
} */

.menu-icon {
      line-height: 60px;
      width: 100%;
      background: #000;
      text-align: right;
      box-sizing: border-box;
      padding: 15px 24px;
      cursor: pointer;
      color: #fff;
      display: none;
}

/* -------------------nav bar----------------- */

#mainBackground{
    position: absolute; 
    min-width: 75vmax !important;
    min-height: 75vmax !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(transparent,rgba(175, 222, 237, 1),rgb(255, 255, 255),transparent, transparent, transparent, transparent);
	animation: lightUp 3s cubic-bezier(0, 12, 0.6, 0.91) forwards;
}

@keyframes lightUp {
	0% {
	  height: 0;
	  width: 0;
	}
	100% {
	  height: 100vmax;
	  width: 100vmax;
	}
  }

/* Animation */

#particleCanvas {
    position: fixed;
    top: 8vmin;
    left: 0;
    height: calc(100% - 16vmin);
    width: 100%;
    opacity: 1;
    z-index: 5;
}

#particleCanvas::before {
    animation-name: enlighten;
    animation-fill-mode: forwards;
    animation-duration: 2s;
}
 


/* ----------------banner------------------*/

.banner{
	/* position: absolute; */
	z-index: 6;
	align-items: center;
	display: flex;
	text-align: center;
	padding-top: 30vh;
	padding-left: 60vh;
	padding-right: 60vh;
	width: 100%;
	line-height: 1;
	height: 50vh;
	background-color: transparent;
	justify-content: center;
	pointer-events: none;
}

.inner{
	position: absolute; 
	z-index: 6;
	height: 511px;
	width: 511px;
	text-align: center;
	align-items: center;
}

.inner h1{
	font-size: 48px;    
	font-weight: 1000;
	font-style: normal;
    line-height: 55px;
    font-family: myFirstFont;
}

.inner p{
	font-size: 18px;
	line-height: 21px;
	align-items: center;
	font-family: myFirstFont;
}

/*--------customer references-------------*/
#customerReferences{
	margin-top: 5vh;
}
.references{
	padding: 15vmin 1vmin;
	position: absolute;
	width: 100%;
	pointer-events: none;
	max-height: 30vh;
}
#referencesHolder{
	display: grid;
	grid-template-columns: 7vw 7vw 7vw;
	height: 7vw;
	grid-column-gap: 3vw;
	justify-content: center;
}

.referenceImageHolder{
	width: 100%;
	height: 100%;
	border: 2px solid #C4C4C4;
	background-color: transparent;
	border-radius: 50%;
	z-index: 100;
	animation: enlighten;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
	position: relative;
	/* pointer-events: all; */
}

@keyframes enlighten {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes enlightenScale {
    from {
        opacity: 0;
        height: 0%;
    }
    to {
        opacity: 1;
        height: 100%;
    }
}

.referenceImage{
	max-height: 65%;
	max-width: 65%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#refTrumpf img{
	max-width: 55%;
	max-height: 55%;
}
#refSchunk{
	animation-delay: 0.2s;
}
#refIngun{
	animation-delay: 0.4;
}

/*--------customer references-------------*/

/*--------award references----------------*/
#awardReferences{
	bottom: 5vmin;
	padding: 0 1vmin;
}

#sealsHolder{
	position: absolute;
	display: grid;
	grid-template-columns: 76vw 9vw 9vw;
	height: 9vw;
	grid-column-gap: 3vw;
	justify-content: center;
	bottom: 5vh;
	/* pointer-events: none; */
}
#refSmig{
	animation-delay: 0.6s;
}
#refExz{
	animation-delay: 0.8s;
}
.sealImageHolder{
	width: 100%;
	height: 100%;
	text-align: center;
	writing-mode: horizontal-lr;
	animation: enlighten;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
	position: relative;
}
.sealImage{
	max-height: 80%;
	max-width: 80%;
	display: -webkit-inline-box;
	margin-top: 4vh;
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-50%, -50%);
}
/*--------award references----------------*/

#refSchunk {
	animation-delay: 0.2s;
}

#refIngun{
	animation-delay: 0.4s;
}

/*--------------footer--------------------*/
#footer{
	color: #000;
	width: 100%;
	height: 7vmin;
	position: absolute;
	bottom: 0;
}
.innerContent{
	margin: 0 auto;
}
#footer .content{
	display: grid;
	justify-content: right;
	line-height: 7vmin;
	font-size: 2vmin;
	grid-column-gap: 1vw;
	grid-template-columns: 11vw 6vw 7vw;
}
.footer-column{
	margin-right: 3vw;
	text-align: center;
}
#footer a{
	color: #000;
	text-decoration: none;
	font-family: myFirstFont;
}
/*--------------footer--------------------*/

/*product page*/
/*-----------product category----------------*/
#allCategorySection{
	height: 100%;
	width: 100%;
}
#div1{
	position: absolute;
	/* display: none; */
	background-color: #fff;
	width: 100%;
	z-index: 500;
	justify-content: center;
	bottom: 0;
}

.is-closeBtn{
	display: block;
	cursor: pointer;
	position: absolute;
	right: 200px;
	top: 48px;
}

.is-closeBtn:hover{
	color: #C01466;
}

.is-closeBtn p{
	font-size: 12px;
	text-transform: uppercase;
	font-family: myFirstFont;
	display: inline-block;
	margin: 3px 10px 0 0;
	transition: color 250ms;
}

.productCategoryHeader{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	padding-top: 150px;
}

.productCategoryHeaderImg img{
	width: 33px;
	height: 33px;
	/*filter: contrast(160%);*/
	margin-right: 0px;
	left: 934px;
	top: 53px;
	margin-bottom: 8px;
}

.productCategoryHeaderOne{
	margin-right: 500px;
	font-family: myFirstFont;
}

.productCategoryHeaderOne h2{
	font-size: 18px;
	font-weight: bold;
}

.productCategoryHeaderTwo{
	margin-right: 30px;
}

.productCategoryHeaderTwo h4{
	font-size: 14px;
}

.productCategory{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
	font-family: myFirstFont;
}
.childZero{
	align-items: left;
	padding-right: 10px;
	padding-top: 10px;
}
.childOne{
	padding-right: 50px;
	padding-left: 50px;
}
.childTwo{
	padding-left: 50px;
}

/*------------product category---------------*/

#div2{
	position: absolute;
	display: none;
	background-color: #fff;
	width: 100%;
	z-index: 500;
	justify-content: center;
	bottom: 0;	
}

@-moz-document url-prefix() {
	#div1, #div2, #div3, #div4, #div5{
		top: 120px;
	}
	.productCategory{
		padding-top: 0px;
		padding-bottom: 150px;
	}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    #div1, #div2, #div3, #div4, #div5{
		top: 120px;
	}
	.productCategory{
		padding-top: 0px;
		padding-bottom: 150px;
	}
}


#div3{
	position: absolute;
	display: none;
	background-color: #fff;
	width: 100%;
	z-index: 500;
	justify-content: center;
	bottom: 0;
}

#div4{
	position: absolute;
	display: none;
	background-color: #fff;
	width: 100%;
	z-index: 500;
	justify-content: center;
	bottom: 0;
}
#div5{
	position: absolute;
	display: none;
	background-color: #fff;
	width: 100%;
	z-index: 500;
	justify-content: center;
	bottom: 0;
} 

/*horizontal line*/
.h{
	width: 55%;
	height: 2px;
	border: 0 none;
	margin-bottom: 0px;
	margin-top: 0px;
	background-color: #CBCBCB;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}
/*horizontal line*/


</style>
</head>
<body>

<!-------------top bar---------------->
<header id="header" class="active">
<section class="alert alert-light" style="margin-bottom: 0px">
<div class = "container">
	<div class="row top-bar">
		<div class="col top-bar-link">
			<span>
				<a href="#">class="fas fa-search" href="#"__^
				Contact</a>
			</span>
			<span>
				<a href="#">^__i class="fas fa-globe-africa"__^</i__^
				EN</a>
			</span>
			<span>
				<a href="#" class="top-bar-login">^__i class="fas fa-user-circle"__^
				Login</a>
			</span>
		</div>		
	</div>
</div>
</section>
</header>
<!-------------top bar---------------->

<!-------------nav bar---------------->
<header id="header" class="active">
<section class="top-nav-bar">
<div class="wrapper">
		<nav>
			<div class="logo">
				<a href="index.html"><img src="img/SignetColored.svg"></a>
			</div>
			<div class="menu-icon">
				^__i class="fa fa-bars fa-2x" style="color: rgba(0, 0, 0, 1)"__^
			</div>
			<div class="menu">
				<ul class="showing">
					<li data-li="products" id="btn" class="open-overlay"><a>Products</a></li>
					<li data-li="solutions" id="btn" class="open-overlay"><a>Solutions</a></li>
					<li data-li="company" id="btn" class="open-overlay"><a>Company</a></li>
					<li data-li="careers" id="btn" class="open-overlay"><a>Careers</a></li>
					<li data-li="partners" class="five" id="btn" class="open-overlay"><a>Partners</a></li>
				</ul>
			</div>
		</nav>	
</div>
</section>
</header>
<!-------------nav bar---------------->

<header>
<section id="allCategorySection" class="hidden">
	<!-------------product category------------>
	<div id="div1" class="item products overlay" style="display: none; overflow-y: hidden;" aria-hidden="true">
	
		<div class="is-closeBtn close-overlay">
			<p>Close</p>
			^__i class="fas fa-window-close"__^
		</div>
		<div class="productCategoryHeader">
			<div class="productCategoryHeaderOne">
				<h2>Products</h2>
			</div>
			<div class="productCategoryHeaderTwo">
				<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
			</div>
			<div class="productCategoryHeaderImg">
				<img src="img/parquet.png">
			</div>
		</div>
		<hr class="h">
		<div class="productCategory">
			<div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
				<p>Anwendungsfälle</p>
				<br>
				<p>Branchen</p>
			</div>
			<div class="childOne">
	
				<h3>Virtual machine > </h3>
				<p>Use the power of machines</p>
	
				<h3>Digital assistants > </h3>
				<p>Empower humans with algorithms & ai</p>
	
				<h3>ETL processors > </h3>
				<p>Connect,  structure & calculate</p>
	
			</div>
			<div class="childTwo">
				
				<h3>Online services > </h3>
				<p>Enterprise analysis at the push of a button</p>
	
				<h3>digital twins > </h3>
				<p>Visualization of complex  systems</p>
	
				<h3>Libraries > </h3>
				<p>Methods, Knowledge & Simulation</p>
	
			</div>
		</div>
	</div>
	<!-------------product category------------>
	
	<!-------------solutions category------------>
	<div id="div2" class="item solutions overlay" style="display: none;" aria-hidden="true">
	
		<div class="is-closeBtn close-overlay">
			<p>Close</p>
			^__i class="fas fa-window-close">
		</div>
		<div class="productCategoryHeader">
			<div class="productCategoryHeaderOne">
				<h2>Solutions</h2>
			</div>
			<div class="productCategoryHeaderTwo">
				<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
			</div>
			<div class="productCategoryHeaderImg">
				<img src="img/parquet.png">
			</div>
		</div>
		<hr class="h">
		<div class="productCategory">
			<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
				<p>Anwendungsfälle</p>
				<br>
				<p>Branchen</p>
			</div> -->
			<div class="childOne">
	
				<h3>Plattform > </h3>
				<p>Connect, transform & visualize</p>
	
				<h3>Smart Factory ></h3>
				<p>Data is power</p>
	
				<h3>Simulation ></h3>
				<p>What would you do</p>
	
			</div>
			<div class="childTwo">
				
				<h3>Value Stream Analysis ></h3>
				<p>At the push of a button</p>
	
				<h3>Cockpit ></h3>
				<p>Always see everything</p>
	
				<h3>KPI system > </h3>
				<p>All your key performance indicators</p>
	
			</div>
		</div>
	
	</div>
	<!-------------solutions category------------>
	
	<!-------------company category------------>
	<div id="div3" class="item company overlay" style="display: none;" aria-hidden="true">
	
		<div class="is-closeBtn close-overlay">
			<p>Close</p>
			^__i class="fas fa-window-close">
		</div>
		<div class="productCategoryHeader">
			<div class="productCategoryHeaderOne">
				<h2>Company</h2>
			</div>
			<div class="productCategoryHeaderTwo">
				<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
			</div>
			<div class="productCategoryHeaderImg">
				<img src="img/parquet.png">
			</div>
		</div>
		<hr class="h">
		<div class="productCategory">
			<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
				<p>Anwendungsfälle</p>
				<br>
				<p>Branchen</p>
			</div> -->
			<div class="childOne">
	
				<h3>Company profile > </h3>
				<p>About us and what we do.</p>
	
				<h3>Now ></h3>
				<p>Who are we today</p>
	
				<h3>Milestones ></h3>
				<p>Experience and sucess</p>
	
			</div>
			<div class="childTwo">
				
				<h3>Coming ></h3>
				<p>Where we are coming from</p>
	
				<h3>Where to ></h3>
				<p>Who will we be</p>
	
				<h3>Values > </h3>
				<p>Be yourself</p>
	
			</div>
		</div>
	
	</div>
	<!-------------company category------------>
	
	<!-------------careers category------------>
	<div id="div4" class="item careers overlay" style="display: none;" aria-hidden="true">
	
		<div class="is-closeBtn close-overlay">
			<p>Close</p>
			^__i class="fas fa-window-close">
		</div>
		<div class="productCategoryHeader">
			<div class="productCategoryHeaderOne">
				<h2>Careers</h2>
			</div>
			<div class="productCategoryHeaderTwo">
				<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
			</div>
			<div class="productCategoryHeaderImg">
				<img src="img/parquet.png">
			</div>
		</div>
		<hr class="h">
		<div class="productCategory">
			<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
				<p>Anwendungsfälle</p>
				<br>
				<p>Branchen</p>
			</div> -->
			<div class="childOne">
	
				<h3>Item > </h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
			</div>
			<div class="childTwo">
				
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item > </h3>
				<p>Text</p>
	
			</div>
		</div>
	
	</div>
	<!-------------careers category------------>
	
	<!-------------Partners category------------>
	<div id="div5" class="item partners overlay" style="display: none;" aria-hidden="true">
	
		<div class="is-closeBtn close-overlay">
			<p>Close</p>
			^__i class="fas fa-window-close">
		</div>
		<div style="background-color: transparent;" class="productCategoryHeader">
			<div class="productCategoryHeaderOne">
				<h2>Partners</h2>
			</div>
			<div class="productCategoryHeaderTwo">
				<h4 style="font-weight: 100;">ENTIRE OVERVIEW PRODUCTION</h4>
			</div>
			<div class="productCategoryHeaderImg">
				<img src="img/parquet.png">
			</div>
		</div>
		<hr class="h">
		<div class="productCategory">
			<!-- <div class="childZero" style="align-items: left; padding-right: 50px; padding-top: 0px; padding-bottom: 130px;">
				<p>Anwendungsfälle</p>
				<br>
				<p>Branchen</p>
			</div> -->
			<div class="childOne">
	
				<h3>Item > </h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
			</div>
			<div class="childTwo">
				
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item ></h3>
				<p>Text</p>
	
				<h3>Item > </h3>
				<p>Text</p>
	
			</div>
		</div>
	
	</div>
	<!-------------Partners category------------>
</section>
</header>

<div id="mainBackground" class="mainBackground"></div>
<!-- Animation -->
<canvas id="particleCanvas" class="particleCanvas" width="1848" height="949"></canvas>

<!------------banner section---------->
<section class="banner">
	<div class="inner">
		<h1 style="padding-top: 100px;">Wertströme</h1>
		<h1>im <span style="color: #C01466">Licht</span> mit digitalen</h1>
		<h1>Assistenzsystemen.</h1>
		<p>Ergebnisse am Puls der</p>
		<p>Zeit für Kosten,</p> 
		<p>Durchlaufzeiten und</p>
		<p>Bestände.</p>
	</div>	
</section>
<!------------banner section---------->

<!------------references-------------->
<section id="customerReferences" class="references">
	<div id="referencesHolder">
		<a id="refTrumpf" class="referenceImageHolder" href="#">
			<img class="referenceImage" src="img/trumpf-logo.svg">
		</a>
		<a id="refSchunk" class="referenceImageHolder" href="#">
			<img class="referenceImage" src="img/schunk-logo.png">
		</a>
		<a id="refIngun" class="referenceImageHolder" href="#">
			<img class="referenceImage" src="img/ingun-logo.png">
		</a>
	</div>
</section>
<!------------references-------------->

<!------------award references-------------->
<section id="awardReferences" class="references">
	<div id="sealsHolder">	
		<div id="refSmig" class="sealImageHolder">
			<img class="sealImage" src="img/SMiG.png">
		</div>
		<div id="refExz" class="sealImageHolder">
			<img class="sealImage" src="img/exzellenzpreis.png">
		</div>
	</div>
</section>
<!------------award references-------------->

<!------------footer------------------------->
<footer id="footer">
	<div class="innerContent">
		<div class="content">
			<div class="footer-column">
				<a class="footer-link" href="#">Impressum</a>
			</div>
			<div class="footer-column">
				<a class="footer-link" href="#">Datenschutz</a>
			</div>
		</div>
	</div>
</footer>
<!------------footer------------------------->
<script src="js/main.js"></script>
<script src="js/nav.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
	// Select required elements from the DOM 
	var body = document.body,
        overlay = document.querySelector('.overlay'),
        overlayBtts = document.querySelectorAll('button[class$="overlay"]');
        
    [].forEach.call(overlayBtts, function(btt) {

      btt.addEventListener('click', function() { 
         
         /* Detect the button class name */
         var overlayOpen = this.className === 'open-overlay';
         
         /* Toggle the aria-hidden state on the overlay and the 
            no-scroll class on the body */
         overlay.setAttribute('aria-hidden', !overlayOpen);
         body.classList.toggle('noscroll', overlayOpen);
         
         /* On some mobile browser when the overlay was previously
            opened and scrolled, if you open it again it doesn't 
            reset its scrollTop property */
         overlay.scrollTop = 0;

      }, false);

    });

</script>

<script>
<pre>//move through nav bar
var li_elements = document.querySelectorAll(".menu ul li");

var item_elements = document.querySelectorAll(".item");

for (var i = 0; i < li_elements.length; i++) {
  li_elements[i].addEventListener("click", function() {
    li_elements.forEach(function(li) {
      li.classList.remove("active");
    });
    this.classList.add("active");
    var li_value = this.getAttribute("data-li");
    item_elements.forEach(function(item) {
      item.style.display = "none";
    });
    if (li_value == "products") {
      document.querySelector("." + li_value).style.display = "block";
    } else if (li_value == "solutions") {
      document.querySelector("." + li_value).style.display = "block";
    } else if (li_value == "company") {
      document.querySelector("." + li_value).style.display = "block";
    } else if (li_value == "careers") {
      document.querySelector("." + li_value).style.display = "block";
    } else if (li_value == "partners") {
      document.querySelector("." + li_value).style.display = "block";
    } else {
      console.log("");
    }
  });
}

//function at close button
var closebtns = document.getElementsByClassName("is-closeBtn");
	var i;
	for(i=0; i<closebtns.length; i++){
		closebtns[i].addEventListener("click", function(){
			this.parentElement.style.display='none';
      $( '.menu .showing' ).find( 'li.active' ).removeClass( 'active' ); 
		});
	}

// function burgerFunction() {
//   var x = document.getElementsByClassName("showing");
//   if (x.style.display === "block") {
//     x.style.display = "none";
//   } else {
//     x.style.display = "block";
//   }
// }


//menu toggle-button
$(document).ready(function() {
  $(".menu-icon").on("click", function() {
        $("nav ul").toggleClass("showing");
  });
});


// $(document).on('click', 'ul li', function(){
//   $(this).addClass('active').siblings().removeClass()
// })

function openModal(){
  document.getElementById('div1').style.display = "block";
  document.body.style.overflow = "hidden";
}

function closeModal(){
  document.getElementById('div1').style.display = "none";
  document.body.style.overflow = "auto";
}

What I have tried:

Please check whether you can solve it

Posted 17-Mar-21 22:16pm
Oshini Nugapitiya

Updated 17-Mar-21 22:51pm

Add a Solution

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

You're using a Bootstrap modal. Bootstrap adds the modal-open class to the <body> element when a modal is open. You could use this style to hide the body content:

CSS

body.modal-open .element-you-want-to-hide { visibility: hidden; }
Or you could change the style of the .modal-backdrop element to hide anything underneath it:

CSS

.modal-backdrop.show { opacity: 1; }

Permalink

Share this answer

Posted 17-Mar-21 22:51pm
Richard Deeming

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email

Password

Forgot your password?

Your Email

This email is in use. Do you need your password?

Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.

Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.

If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.

Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-03-17T22:51:00

You're using a Bootstrap modal. Bootstrap adds the modal-open class to the <body> element when a modal is open. You could use this style to hide the body content:

CSS

body.modal-open .element-you-want-to-hide {
    visibility: hidden;
}

Or you could change the style of the .modal-backdrop element to hide anything underneath it:

CSS

.modal-backdrop.show {
    opacity: 1;
}