Menu icon Foundation
Reveal modal - Recalculate top-offset on resize

I've been trying to get the reveal modal to work as I want them; that is:

- Fixed background with scrolling inside the modal
- Full-size modal on Small, Medium-size on medium-up - even when resizing

I've accomplished the first by adding some CSS and JS, see #1 and #2 below (I've added this for the sake of completeness).

When I load the page on a medium-up screen, the modal reacts as wanted (ie: 80% height, with 3.15rem offset on top)
When I load the page on a medium-up screen, the modal reacts as wanted (ie: 100% height, without offset on top)

However; when I do the following steps:
- I load the page in medium
- Open the modal (correctly: 80% height, 3.15 rem top)
- Close the modal
- Resize to small
- Open the modal
It displays incorrectly: 100% height, but with 3.15 rem offset on top.

I've tried adding a reflow command on resize, but this doesn't solve the problem, also because the resize event is called when calling the modal.

I think it lies in the cache_offset function in reveal.js. This function is called on open, but only when [(typeof modal.data('css-top') === 'undefined')]. I've tried resetting these data values on resize (removeData, see #3), but this doesn't work.

Any other ideas? Perhaps I'm waaay off...

// #1 - JS
var $body = $('body');
$body.on('open.fndtn.reveal', function(){
	$body.css('overflow', 'hidden').off('open.fndtn.reveal');
});

// #2 - CSS
.reveal-modal{
    overflow-y: auto;
	@media #{$medium-up} {
		max-height: 80%;
		top: $reveal-position-top;
	} 
	@media #{$small-only} {
		height: 100vh;
		max-height: 99%;
		top: 0;
	} 
}
            
// #3 - JS
$(window).on('resize', Foundation.utils.debounce(function(e){
    $('.reveal-modal').each(function() {
    	$(this).removeData('css-top');
    	$(this).removeData('offset');
    	
    });
    $(document).foundation('reveal', 'reflow');
}, 500));
         

revealresizeReflowmodalreveal modaloffsettop

I've been trying to get the reveal modal to work as I want them; that is:

- Fixed background with scrolling inside the modal
- Full-size modal on Small, Medium-size on medium-up - even when resizing

I've accomplished the first by adding some CSS and JS, see #1 and #2 below (I've added this for the sake of completeness).

When I load the page on a medium-up screen, the modal reacts as wanted (ie: 80% height, with 3.15rem offset on top)
When I load the page on a medium-up screen, the modal reacts as wanted (ie: 100% height, without offset on top)

However; when I do the following steps:
- I load the page in medium
- Open the modal (correctly: 80% height, 3.15 rem top)
- Close the modal
- Resize to small
- Open the modal
It displays incorrectly: 100% height, but with 3.15 rem offset on top.

I've tried adding a reflow command on resize, but this doesn't solve the problem, also because the resize event is called when calling the modal.

I think it lies in the cache_offset function in reveal.js. This function is called on open, but only when [(typeof modal.data('css-top') === 'undefined')]. I've tried resetting these data values on resize (removeData, see #3), but this doesn't work.

Any other ideas? Perhaps I'm waaay off...

// #1 - JS
var $body = $('body');
$body.on('open.fndtn.reveal', function(){
	$body.css('overflow', 'hidden').off('open.fndtn.reveal');
});

// #2 - CSS
.reveal-modal{
    overflow-y: auto;
	@media #{$medium-up} {
		max-height: 80%;
		top: $reveal-position-top;
	} 
	@media #{$small-only} {
		height: 100vh;
		max-height: 99%;
		top: 0;
	} 
}
            
// #3 - JS
$(window).on('resize', Foundation.utils.debounce(function(e){
    $('.reveal-modal').each(function() {
    	$(this).removeData('css-top');
    	$(this).removeData('offset');
    	
    });
    $(document).foundation('reveal', 'reflow');
}, 500));
         
Rafi Benkual over 3 years ago

I'm assuming you are using Foundation 5 by the reflow method?

I can see it happening here:
http://codepen.io/rafibomb/pen/XXqKoM?editors=1100

I don't know the answer but would love to see if you or any others have ideas on it.
I'd say this is worthy of a bug report on GitHub (tag it Foundation 5)

Michiel Sweere over 3 years ago

Thx Rafi, that Codepen is exactly the problem I stated.
I'll make a bug report, linking to your Codepen.