Menu icon Foundation
REVEAL - Setting top position via JS not working!

I'm having difficulties setting a dynamic position to the reveal modal.
I'm trying something like this:

$modal.data('css-top', $container.offset().top + ($container.outerHeight(true)/2) - ($modal.outerHeight()/2));
$($trigger.data('open-modal')).foundation('reveal', 'open', {
animation: 'fadeAndPop',
animation_speed: 250,
close_on_background_click: false,
close_on_esc: false
});

Thing is, that the top position is onlt correct when my scrollTop is zero, so when i haven't scrolled the page. If I do, the calculated 'css-top' above is always the same, but the value inserted on the reveal element is another.

This seems very tricky / buggy. Any knows what's the proper way to set a dynamic top to the reveal modal?

Also the 'close_on_background_click: false' and 'close_on_esc: false' aren't working, even with false i can close the modal with 'esc' or clicking on the background...

I'm using the latest version 5.2.2

Thank you!

revealmodaltoppositioncloseescbackgroundcss-topoffsetdynamicjavascript

I'm having difficulties setting a dynamic position to the reveal modal.
I'm trying something like this:

$modal.data('css-top', $container.offset().top + ($container.outerHeight(true)/2) - ($modal.outerHeight()/2));
$($trigger.data('open-modal')).foundation('reveal', 'open', {
animation: 'fadeAndPop',
animation_speed: 250,
close_on_background_click: false,
close_on_esc: false
});

Thing is, that the top position is onlt correct when my scrollTop is zero, so when i haven't scrolled the page. If I do, the calculated 'css-top' above is always the same, but the value inserted on the reveal element is another.

This seems very tricky / buggy. Any knows what's the proper way to set a dynamic top to the reveal modal?

Also the 'close_on_background_click: false' and 'close_on_esc: false' aren't working, even with false i can close the modal with 'esc' or clicking on the background...

I'm using the latest version 5.2.2

Thank you!

tenshi13 almost 4 years ago

not sure if you've found a solution,
have a look at this :
http://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attrdata-itemname-does

``
The .data() call is special - not only does it retrieve HTML5 data attributes it also attempts to evaluate/parse the attributes. So with an attribute like data-myjson='{"hello":"world"}' when retrieved via .data() will return an Object while retrieval via .attr() will return a string. See jsfiddle example.

Since .data() does extra processing jQuery stores the results of attribute evaluation in $.cache - after all, once a data attribute has been evaluated it would be wasteful to re-evaluate on every .data() call - especially since data variables can contain complex JSON strings.
``

try to use .attr() or .css() instead, give it a try, not too sure but i think .css() is better