I am writing a program aiming to flip the card while it is clicked. The javascript code looks like this:
/* card flipping onclick */
import "./Stylesheets/FlipCardStyle.css"
var cards = document.querySelectorAll('.card');
[...cards].forEach((card)=>{
card.addEventListener( 'click', function() {
card.classList.toggle('flipped');
});
});
And the CSS code works like this:
#import "GridLayouts.css";
.card {
background: transparent;
width: 117px;
height: 200px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
position: relative;
cursor: pointer;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.wrapper-horizontal .card {
float: left;
margin-right: -47px;
margin-bottom: 20px;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.card:hover {
transform: rotateY(180deg) translate(0, 40px);
}
/* Position the front and back side */
.card-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.card-face-front {
background: url("...") -234px 0px;
}
/* Style the back side */
.card-face-back {
background: url("...");
background-size: 100% 100%;
transform: rotateY(180deg);
}
The HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" href="Stylesheets/FlipCardStyle.css">
<link rel="stylesheet" href="Stylesheets/GridLayouts.css">
<link rel="stylesheet" href="Stylesheets/Buttons.css">
<html>
<div class="wrapper-horizontal">
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<script src="./FlipCard.js"></script>
</div>
<button class="btn">Shuffle</button>
</html>
Theoretically, when I clicked the card, js script will invoke the .card.flipped, which would rotate the card over. But it doesn't work... My logic of the code comes from https://codepen.io/mondal10/pen/WNNEvjV, it workds on codepen but it doesn't seem to work for me.
Could anyone help me? Thanks a lot!!!
The current included HTML is invalid, and you have a CSS selector that turns the cards around when hovered, I changed .card:hover to be .flipped because there was no flipped class to be toggled by the JavaScript. And I removed the invalid HTML, also replaced the background images that linked to nothing to colors, so it shows the cards in the following snippet.
var cards = document.querySelectorAll('.card');
[...cards].forEach((card) => {
card.addEventListener('click', function() {
card.classList.toggle('flipped');
});
});
.card {
background: transparent;
width: 117px;
height: 200px;
perspective: 1000px;
position: relative;
cursor: pointer;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.wrapper-horizontal .card {
float: left;
margin: 10px;
margin-bottom: 20px;
}
/* changed .card:hover to .flipped because there was no class to be toggled. */
.flipped {
transform: rotateY(180deg) translate(0, 40px);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
.card-face-front {
background: red;
}
.card-face-back {
background: blue;
transform: rotateY(180deg);
}
<div class="wrapper-horizontal">
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<script src="./FlipCard.js"></script>
</div>
<button class="btn">Shuffle</button>
Maybe you copy all the source code from codepen without knowing the code format and structure
var cards = document.querySelectorAll('.card');
[...cards].forEach((card) => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
});
body {
font-family: sans-serif;
}
.scene {
display: inline-block;
width: 200px;
height: 260px;
/* border: 1px solid #CCC; */
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: crimson;
}
.card__face--back {
background: slateblue;
transform: rotateY(180deg);
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
<script src="js/main.js"></script>
</body>
</html>
Related
I am trying to create a card game but I am stuck at the end point of the Translate function, the player has 30 cards (for programming I only use four since it is easier with less lines), when clicking on a card, the card makes an animation with translate and rotate to reveal the value of the card, and since I only need to reveal the value of 3 cards, I need them to end up in a specific place and be clearly visible, even if the user chooses consecutive cards.
The problem is that I can't make the card end in the div that has the Card1 label, since translate moves me according to the starting point and doesn't to the end point. Can someone help me find a way to do this with translate or is there any other way to do it?
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate{
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2{
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>
<script>
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function () {
card.classList.add('animate');
};
</script>
</body>
</html>
i'm having trouble figuring out how to have each example have a modal with it's own content. currently, if i click EXAMPLE2, the content from EXAMPLE1 still pops up. i also am not sure why the icons or the modals don't work on here, but i'm hoping someone can at least give pointers based on the code here. i tried changing the IDs to be unique, but i don't think i'm doing it correctly? thank you in advance
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
width: 120px;
/*height: 40vh;*/
float: left;
padding-right: 20px;
text-align: center;
/*position: relative;*/
border-radius: 50%;
position: relative;
display: inline-block;
}
/*.icon-inner span {
float: left;
padding-left: 20px;
text-align: center;
position: relative;
border-radius: 50%;
display: inline-block;
}*/
.icon-inner span:before {
margin-left: 0;
font-size: 40px;
}
.icon-inner span:hover {
margin-left: 0;
font-size: 40px;
color: #4FC1E9;
cursor: pointer;
}
.icon-inner-info span:before {
height: 15px;
width: 20px;
margin-left: 0;
padding-left: 2px;
padding-right: 5px;
font-size: 12px;
/*float: flex;*/
position: relative;
}
.icon-inner-info span:hover {
margin-left: 0;
cursor: help;
position: relative;
padding-right: 5px;
}
.icon-inner-info .tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.icon-inner-info .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.icon-inner-info:hover .tooltiptext {
visibility: visible;
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content-pop {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:500px;
height:250px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:30px;
height:30px;
background:#222;
color:#fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay {
display:block;
}
.popup.active .content-pop {
transition:all 300ms ease-in-out;
transform:translate(50%,-50%) scale(1);
}
#media(max-width: 750px) {
.popup.active .content-pop {
transform:translate(-10%,-50%) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="font/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- -->
</head>
<body>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>
Initially your problem was duplicate IDs. However, after changing them the problem became having the same name for two different functions.
The simplest solution is to pass to the function the ID that you want to open:
For testing purposes, I removed all of your CSS because the popup wasn't aligning correctly.
The word OPEN in my example is your open icon. It works the same, just doesn't have the icon.
function togglePopup(id){
document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-1')">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-2')">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>
I have a sprite image containing 4 different pictures. They are 520px in height. I would like to animate through them when either the left or right arrows are clicked. I'm unsure why it's not working.
Edited with changes and added css. still not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
Something like this should work but i don't know what is in your css files, i mean how you define your arrows
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"></button>
<button id="rightArrow" class="fbtnLast"></button>
</div>
</div>
<div id="startApp">
<ul>
<li>
Start here!
</li>
</ul>
</div>
The bigger issue is on the button element, you have onclick="move('left');" but the move function is never defined. You can take that out and let the even listener handle it instead.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/my_script.js"></script>
<script>
$(document).ready(function(){
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
});
});
</script>
</body>
</html>
I have problem.
I have one div. On click I wont to move that div. But I want the div always to be in the center namely when I move the DIV for 10px, for example, and the overflow moves with div (for 10px).
Help please :)
$(document).ready(function() {
$("#welcome").hide();
$("#welcome").fadeIn(1000, function() {
$("#welcome").delay(1000).fadeOut(1000);
});
});
body{
margin: 0;
padding: 0;
overflow: hidden;
}
#welcome {
background: rgba(0, 0, 0, 0.5);
margin: 0;
height: 100vh;
position: absolute;
overflow: hidden;
width: 100%;
text-align: center;
padding-top: 47vh;
}
#monopol{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
#welcome h1 {
margin: 0;
}
#radnja {
height: 19vh;
width: 19%;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="welcome">
<h1>Welcome to Monopoly</h1>
</div>
<center>
<div id="monopol">
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
</div>
</center>
</body>
</html>
I need some help when showing an image in a modal, I want the image to scale up and down maintaining its ratio.
If the image is smaller than the window then show it all
If the image is larger than the window enlarge it as much as possible to fill the window maintaining scale (no scrolling)
Also I'd like to have the body of the website darker and unable to scroll when a modal is opened, but I can't figure how to do so. Here's my HTML and CSS code (I know it doesn't work well when on small resolutions but it's not my requirement for now):
html, body {
width: 100%;
height: 100%;
margin: 0;
}
h1, h4{
color:#0B486B;
}
#container {
margin: 0;
padding: 0 3% 0 3%;
width: 100%;
height: 100%;
background-color: #E0E4CC;
}
#footer {
text-align: center;
padding: 10px;
width: 100%;
height: 100px;
background-color: #E0E4CC;
}
#sidebar {
padding-top: 10%;
height: 100%;
background-color: #69D2E7;
text-align: center;
}
#btngroup {
padding-top: 20%;
}
#grid {
padding: 0 2% 2% 2%;
height: 100%;
background-color: #A7DBD8;
}
#gridrow {
padding: 3% 0 0 0;
height:50%;
}
#gridcol {
height:100%;
position: relative;
}
img {
opacity: 1;
cursor: pointer;
max-width: 92%;
max-height: 92%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img:hover {
opacity: 0.8;
}
#myModal {
display: none;
}
#modalDialog {
margin: auto;
}
#modalContent {
height: 100%;
width: 100%;
}
#modalBody {
padding:3px;
}
#imgModal {
max-width: 100%;
max-height: 100%;
cursor: default;
opacity: 1;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="row">
<div id="sidebar" class="col-md-3 sidenav">
<h1>HELLO<br>WORLD</h1>
<ul id="btngroup" class="nav nav-stacked">
<li><h4>Pictures</h4></li>
<li><h4>Music</h4></li>
<li><h4>About me</h4></li>
</ul><br>
</div>
<div id="grid" class="col-md-9">
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://www.avionslegendaires.net/wp-content/uploads/images/dossier/F-15-leurre-thermique.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://img.171u.com/image/1609/2607005498770.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="http://www.tappingforabundance.com/wp-content/uploads/slider1.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" onclick="this.style.display='none'">
<div id="modalDialog" class="modal-dialog">
<!-- Modal content-->
<div id="modalContent" class="modal-content" style="background-color:#000000">
<div id="modalBody" class="modal-body">
<img id="imgModal" class="img-rounded" />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("imgModal").src = element.src;
document.getElementById("myModal").style.display = "flex";
}
</script>
</body>
</html>
.doNotScroll{
overflow: hidden;
height: 100%;
}
....
$(document).on('click', '.img-rounded', function(){
$('BODY, HTML').addClass('doNotScroll');
})
...
$(document).on('click', '#myModal', function(){
$('BODY, HTML').removeClass('doNotScroll');
})
disable scrolling Body:
BODY,HTML{
overflow: hidden;
height: 100%;
}
For dark Background place a div directly in body:
DIV.cover.inactiv{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10 // play with it
}
DIV.cover.activ{
display: block;
}