Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
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">×</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
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
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
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>Offline
Thanks for all, you’re right, I have to look at these solutions
Thank you very much
Offline
Pages: 1