Hafifie PKB
102 lines
3.6 KiB
Vue
102 lines
3.6 KiB
Vue
<template>
|
||
<div>
|
||
<transition name="modal-fade">
|
||
<div v-if="showModal" class="modal-overlay show"></div>
|
||
</transition>
|
||
<transition name="modal-fade">
|
||
<div
|
||
v-if="showModal"
|
||
class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
|
||
>
|
||
<div class="relative w-screen my-6 mx-auto max-w-6xl">
|
||
<!--content-->
|
||
<div
|
||
class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"
|
||
>
|
||
<!--header-->
|
||
<div
|
||
class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t"
|
||
>
|
||
<h3 class="text-3xl font-semibold">
|
||
Hasil Penukaran
|
||
</h3>
|
||
<button
|
||
class="p-1 ml-auto border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
|
||
v-on:click="toggleModal()"
|
||
>
|
||
<span
|
||
class="text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
|
||
>
|
||
×
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<!--body-->
|
||
|
||
test
|
||
<!--footer-->
|
||
<div
|
||
class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b"
|
||
>
|
||
<button
|
||
class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1"
|
||
type="button"
|
||
v-on:click="toggleModal()"
|
||
>
|
||
Batal
|
||
</button>
|
||
<button
|
||
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
|
||
type="button"
|
||
v-on:click="kemaskinifunc()"
|
||
>
|
||
Kemaskini
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: "resultmodal",
|
||
data() {
|
||
return {
|
||
showModal: false,
|
||
};
|
||
},
|
||
methods: {
|
||
toggleModal: function () {
|
||
this.showModal = !this.showModal;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.modal-fade-enter-active,
|
||
.modal-fade-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.modal-fade-enter, .modal-fade-leave-to /* .modal-fade-leave-active in <2.1.8 */ {
|
||
opacity: 0;
|
||
}
|
||
.modal-overlay {
|
||
background: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 40; /* Ensure it is behind the modal but in front of other content */
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
.modal-overlay.show {
|
||
opacity: 1;
|
||
}
|
||
</style>
|