Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2020-05-21 16:56:19

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 228
Website

Modal image stay on top

Hi,

I am installing a modal window for an image but my problem is when we scroll the page, the modal window remains at the top of the page.
I can not find the CSS trick that would make the window appear in full screen instead is place regardless of the position of the scrolling of the page.

Here is an example on my page, scroll down and click on the image:

https://phototheque.nicolaslogerot.com/test

To see the modal window, you can click on the arrow "Scroll to top" at the bottom right

And here is the html code:

<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>

and the CSS:

.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%;
  }
}

Thank you

Last edited by Nico3939 (2020-05-21 16:58:58)

Offline

#2 2020-05-22 00:45:23

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,619
Website

Re: Modal image stay on top

Nico, did you look into using popups that are directly supported by Backlight? Rod has an article on how to use and style them: https://ttg-tips-and-tricks.barbeephoto … pup-boxes/


Daniel Leu | Photography   
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com

Offline

#3 2020-05-22 02:34:38

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,792
Website

Re: Modal image stay on top

Also, Backlight already supports and loads jQuery, so you don't need to load it again.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#4 2020-05-22 11:25:46

Matthew
Administrator
From: San Francisco, CA
Registered: 2012-09-24
Posts: 5,782
Website

Re: Modal image stay on top

Yep, what they said. Just hook into Fancybox to launch whatever modal content you have. There's zero reason to install your own modal library. We've already taken care of it for you, such that you won't need to use PHPlugins, custom stylesheets, or any other advanced features. Just drop the right markup into your content and you're good to go. It's as simple as this:

#About

Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

<a href="#myModal" data-fancybox>MyModal</a>
<div id="myModal" style="display: none;">Modal content</div>

Matt

The Turning Gate, http://theturninggate.net

Offline

#5 2020-05-22 19:36:04

Nico3939
Member
From: France
Registered: 2016-10-05
Posts: 228
Website

Re: Modal image stay on top

Thanks for all, you’re right, I have to look at these solutions

Thank you very much

Offline

Board footer

Powered by FluxBB