Community @ The Turning Gate

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales arcu vitae laoreet luctus. Fusce ullamcorper id nibh eget hendrerit. Phasellus est metus, posuere eu ipsum at, suscipit dapibus massa. Nunc aliquam consectetur velit a porta. Etiam convallis venenatis lorem id porttitor. Etiam et efficitur eros. Sed diam arcu, auctor vel felis nec, pulvinar bibendum eros. Curabitur consequat dui magna, eu vehicula lectus efficitur sit amet. Nullam ut fermentum nulla. Aliquam quis scelerisque ligula, in placerat orci. Pellentesque non elit in sem iaculis euismod eget id odio. Sed consequat massa a pharetra tincidunt.... blablabla.....</p>
<div data-lang="fr">
<img class="myImg" src="https://phototheque.nicolaslogerot.com/backlight/designer/page/image/36" alt="Dimensions des tirages" style="width:100%;max-width:300px">
</div>
<div data-lang="en">
<img class="myImg" src="https://phototheque.nicolaslogerot.com/backlight/designer/page/image/38" alt="Print dimensions" style="width:100%;max-width:300px">
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
  var modal = $('#myModal')
  var span = $(".close")  
  var modalImg = $("#img01")
  var captionText = $("#caption")
 
  var img = $('.myImg')
 
 img.click(function(){
      modal.css('display', 'block')
      modalImg.attr('src', this.src)
      captionText.html(this.alt)
      document.body.style.overflow = "hidden"; // ADD THIS LINE
    document.body.style.height = "100%"; // ADD THIS LINE
  });
 
  span.click(function() {
    modal.css('display', 'none')
    document.body.style.overflow = "auto"; // ADD THIS LINE
    document.body.style.height = "auto"; // ADD THIS LINE
	});
});
</script>

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(255,255,255,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #000000;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #000000;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #00d4d8;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

https://mywebsite.com//backlight/designer/page/image/13