I am struggling to grasp the concept of Bootstrap modal div visibility, especially when they appear visible even when hidden.
The normal divs on the page, outside of the modal, function properly with my code.
...
I created some JS and CSS logic that dictates: if any element with the class .animation-element is within the window's view, add the class .in-view; otherwise, remove it. This should be straightforward, and it is, except for the divs inside the modal with the .animation-element class always showing as having the .in-view class.
...
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
and
.animation-element {
opacity: 0;
}
.animation-element.in-view {
opacity: 1;
transition: 1s ease-in-out;
transition-delay: 0.2s;
}
Even if the div with the data-target for the modal does not display .in-view because it's off-screen, any div inside the modal with the class .animation-element has the .in-view class. I have placed all modal divs at the bottom of the page, but they show the same outcome.
Check out an example on CodePen here: http://codepen.io/ethanethan/pen/MbbyoE