I have added a close button to a div in Calendly popup in VueJS and I want to close this div when click on the close button. How can I do this?
This is my Calendly Code:
<TransitionRoot as="template" :show="openTimes">
<Dialog
as="div"
class="fixed inset-0 overflow-y-auto"
@close="closeModal"
:open="openTimes"
:initialFocus="closeModalTimesRef"
>
And this is the button I have added
<button type="button" class="close"
@click="$emit('close')"> X
</button>
You probably want to use the v-if directive (or other methods of conditional rendering available in the link).
Usually you set a key like: showDialog: true in your data/state object and add it to your dialog and catch the close event like so:
<script>
data() {
return {
showDialog: true;
};
},
</script>
<template>
<dialog
v-if="showDialog"
@close="showDialog = false;"
/>
</template>
You can use something like this :
<button onclick="showOrCloseDiv()">Click The Button</button>
<div id="thedivid">
JS tuto
</div>
<script>
function showOrCloseDiv() {
var v = document.getElementById("thedivid");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>