Overlay/Popup with just an image and

5

You may also want to stop the window/document scrolling.

I have used this in the past.

It gets called for example when the overlay is shown (via timeline keyframe action) and when the close overlay button is clicked. ( same timeline in reverse )

Using will stop the document scrolling behind the overlay.

if (! window.scrollable){ window.scrollable = false}
	
	
	if (!window.scrollable){
	document.body.style.overflow= 'hidden';
	window.scrollable = true;
	} else {
	document.body.style.overflow= 'scroll';
	window.scrollable = false;
	}

Also consider that when on the normal scene you may scroll down or up. Then show the overlay/image.

You most likely will need to use a method to place the overlay/image more or less in the right place.

var gallery = hypeDocument.getElementById('gallery'); 
 
	
	$(document).ready(function(){

  window.addEventListener("scroll", function() {
    
  hypeDocument.setElementProperty(gallery, 'top', $(window).scrollTop() +150)
    
    
});

})

Here is a stripped down version of something I wrote a while back. It is only an example and will not be perfect for your needs but shows you what I am explaining.

flotingGal.hypetemplate.zip (1.2 MB)

3 Likes