1

I have a pop-up modal that is being called by another componenent, however, when clicked, it does not show the dialog, only the overlay is visible. Basically, It's not changing from "modal fade" to "modal show" automatically as it does with bootstrap.

This is the modal component:

<template>
    <div>
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close" @click="$emit('close')">&times;</span>
                <div class="modal-header">
         

                    <p>{{ title }}</p>
                </div>
                <div class="modal-body">
                  
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

which is called by another component in this way:

<template>
    <div class="box">
        <div>
            <a
                id="myBtn"
                @click="showModal = true"
                :href="javascript:;"
            >
                <div class="grid">
                    <p
                        class="mosiac_title"
                    >
                        {{ title }}
                  
                    </p></div
            ></a>
        </div>

        <!-- overlay -->
        <div
            class="p_overlay"
            v-if="showModal"
            @click="showModal = false"
        ></div>
        <PopUpModal
            v-show="showModal"
            @close="showModal = false"
            :title="title"
        >
            <slot></slot>
        </PopUpModal>
    </div>
</template>

script>
import PopUpModal from "./PopUpModal.vue";

export default {
    props: ["title", "link"],
    mounted() {
        console.log("Box mounted.");
    },
    components: {
        PopUpModal,
    },
    data() {
        return {
            showModal: false,
        };
    },
   
};
</script>
apkr x
  • 11
  • 3

1 Answers1

0

Please add this in modal component in mounted:

mounted:function(){

   $('#myModal').modal('show');
}



<script>


export default {
   
    mounted() {
       $('#myModal').modal('show');
    },
   
   
};
</script>

with showModal= true the modal is added into the dom. but you need to show modal when it is mounted. Please make sure to hide this too on destroy component.

  <PopUpModal
        v-show="showModal"      // Change this to v-if
        @close="showModal = false"
        :title="title"
    >
        <slot></slot>
    </PopUpModal>
Neha
  • 2,136
  • 5
  • 21
  • 50
  • This did not work, as the modal is called by the box component, it mounted with the component rather than on-click. I want the modal to show on-click – apkr x Sep 21 '22 at 07:24
  • Just change pop-up modal v-show to v-if – Neha Sep 21 '22 at 07:37
  • i was able to add the "show" class, and also changed to v-if, however the fade doesn't occur, it just pops up without transitions, would you have any idea why? – apkr x Sep 22 '22 at 01:54