Skip to content

Instantly share code, notes, and snippets.

@iamklim
Created May 13, 2019 10:24
Show Gist options
  • Save iamklim/934f242d2ec0ba671cc81f107c1f9e55 to your computer and use it in GitHub Desktop.
Save iamklim/934f242d2ec0ba671cc81f107c1f9e55 to your computer and use it in GitHub Desktop.
Show popup without overflow:hidden, page jumping and toggling
function togglePopup() {
var scrollPosition;
$(document).on("click", '[data-id="show-popup"]', function(e) {
e.preventDefault();
var popup = '[data-id="popup"]';
scrollPosition = $('body').scrollTop() === 0
? $('html').scrollTop()
: $('body').scrollTop();
$('body').addClass('no-scroll').css('top', -scrollPosition);
popup.fadeIn();
});
$(document).on("click", popup, function (e) {
e.preventDefault();
if ($(e.target).is($(e.currentTarget)) || $(e.target).is('[data-id="close-popup"]')) {
$(this).fadeOut();
$('body').removeClass('no-scroll').css('top', 'auto');
$('html, body').scrollTop(scrollPosition);
}
});
}
// // CSS class
// .no-scroll {
// width: 100%;
// height: 100vh;
// position: fixed;
// overflow-y: scroll;
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment