CASH-79: add ability to stop page scroll on modal open/close

src/digital-components/modal/modal.vue

@@ -53,6 +53,7 @@ export default {
     props: {
         headerText: String,
         footerButtonText: String,
+        suppressPageScroll: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },
@@ -107,8 +108,10 @@ export default {
         onModalClosed() {
             this.resetButtonStyle();
             this.onModalClosedCallback?.();
+            if (this.suppressPageScroll) document.querySelector("body").classList.remove("prevent-modal-scroll");
         },
         openModal() {
+            if (this.suppressPageScroll) document.querySelector("body").classList.add("prevent-modal-scroll");
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
             modal.show();
             this.$emit("isModalOpened", true);

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -44,8 +44,7 @@
                         @back-clicked="handleBackButtonAction"
                         @ForwardClicked="handleForwardButtonAction" />
 
-                    <saveProgressModalQuestion
-                        modalWidgetName="SaveProgressModalWidget" />
+                    <saveProgressModalQuestion modalWidgetName="SaveProgressModalWidget" />
                 </div>
             </div>
         </div>

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -9,6 +9,7 @@
         <modal
             :ref="modalName"
             :headerText="modalHeaderText"
+            suppressPageScroll
             :footerButtonText="modalButtonText"
             @footer-button-event="saveProgress">
             <p class="modal-body">{{ modalBodyText }}</p>
@@ -80,7 +81,6 @@ export default {
             // TODO send store call to send to new API (that triggers an email send)
 
             // TODO hide button trigger and replace with success message
-
         },
     },
 

src/styles/common-styles.scss

@@ -77,7 +77,7 @@ body {
         }
     }
 }
-.modal-open {
+.modal-open:not(.prevent-modal-scroll) {
     .container-fluid {
         &.page-container-grouped-styles {
             overflow: hidden;