modal seems to be working, needs more testing

src/digital-components/modal/modal.vue

@@ -48,6 +48,7 @@ import { useForm } from "vee-validate";
 export default {
     name: "modal",
     props: {
+        modalId: String,
         headerText: String,
         footerButtonText: String,
         onModalOpenedCallback: {
@@ -57,8 +58,8 @@ export default {
             type: Function,
         },
     },
-    setup() {
+    setup(props) {
-        const modalId = `modal-${crypto.randomUUID()}`;
+        const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
 
         const { meta, validate, resetForm } = useForm();
 
@@ -113,6 +114,7 @@ export default {
 
 <style lang="scss">
 .modal {
+    overflow: hidden;
     top: auto;
     bottom: 0;
     h5,

src/layouts/z-test-page-jg/z-test-page-jg.vue

@@ -5,16 +5,16 @@
         <siteHeader cmsWidgetName="SiteHeaderWidget"/>
         <div class="fade-on-route-transition  overflow-scroll container">
 
-            <div class="row mt-4 position-sticky top-100" id="welcomeFooter">
+            <div class="row mt-4 position-sticky top-100">
                 <div class="col">
-                    <p @click="() => this.openModal('TestModal')" class="small">
+                    <p @click='() => openModal("TestModal")' class="small">
                         here
                     </p>
-        
+                    <p @click='() => openModal("ModalName")'>
-                    <contentGroupModal cmsWidgetName="TestModal"
+                        here
-                    :ref="TestModal"
+                    </p>
-                    />
+                    
-
+                    <a href="#!" data-bs-toggle="modal" data-bs-target="#ModalName" aria-label="Modal window">Wow!!</a>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -26,13 +26,23 @@
             </div>
         </div>
     </div>
-
+    <contentGroupModal cmsWidgetName="TestModal"
+                        ref="TestModal"
+                    />
+    <modal
+        ref="ModalName"
+        modalId="ModalName"
+        footerButtonText="test" 
+        :onModalClosedCallback="clickModalButton">
+        <p>I'm a modal!</p>
+    </modal>
 </Form>
 </template>
 
 <script>
     import siteHeader from '@/iss-components/site-header/site-header';
     import siteFooter from "@/iss-components/site-footer/site-footer";
+    import modal from "@/digital-components/modal/modal";
 
     import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal" 
     import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -46,11 +56,13 @@
 export default {
         name: "z-test-page-jg",
         mixins: [BaseFormMixin],
-        method: {
+        methods: {
             openModal(modalName) {
-                console.log("here")
                 this.$refs[modalName].openModal();
             },
+            clickModalButton() {
+                alert("you clicked me!");
+            }
         },
         computed: {
             bodyText() {
@@ -81,7 +93,8 @@ export default {
             siteHeader,
             siteFooter,
             Form,
-            contentGroupModal
+            contentGroupModal,
+            modal
         },
 }
 </script>