Fixed scroll issues with modal open

This commit is contained in:
Jonathan Barrow 2022-07-10 12:32:57 -04:00
parent 02da4c10cd
commit e9175f491d
3 changed files with 8 additions and 2 deletions

View File

@ -13,6 +13,9 @@
width: 1600px;
height: 1400px;
}
body.modal-open {
overflow: hidden;
}
.back-arrow {
position: absolute;
@ -261,7 +264,7 @@ form button.unsubscribe:hover {
div.unsub-modal-wrapper,
div.switch-tier-modal-wrapper {
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;

View File

@ -70,6 +70,7 @@ buttons.submit.addEventListener('click', function(e) {
oldTierNameSpan.innerText = currentTierElement.dataset.tierName;
newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName;
document.body.classList.add('modal-open');
document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden');
} else {
submitForm();
@ -83,12 +84,14 @@ buttons.unsubModal.show.addEventListener('click', function(e) {
tierNameSpan.innerText = currentTierElement.dataset.tierName;
// Show the unsubscribe modal
document.body.classList.add('modal-open');
document.querySelector('.unsub-modal-wrapper').classList.remove('hidden');
});
buttons.unsubModal.close.addEventListener('click', function(e) {
e.preventDefault();
// Hide the unsubscribe modal
document.body.classList.remove('modal-open');
document.querySelector('.unsub-modal-wrapper').classList.add('hidden');
});
buttons.unsubModal.confirm.addEventListener('click', function(e) {
@ -101,6 +104,7 @@ buttons.switchTierModal.close.addEventListener('click', function(e) {
e.preventDefault();
// Hide the switch tier modal
document.body.classList.remove('modal-open');
document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden');
});
buttons.switchTierModal.confirm.addEventListener('click', function(e) {

View File

@ -1,6 +1,5 @@
<link rel="stylesheet" href="/assets/css/upgrade.css" />
<div class="wrapper">
<a href="/account" class="back-arrow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
<span>Back</span>