78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div class="favorite-modal show">
|
|
<div class="modal-content">
|
|
<span class="close" @click="closeModal">×</span>
|
|
<h2>Modal Title</h2>
|
|
<p>
|
|
This is the content of the modal. You can add any HTML elements or
|
|
content here.
|
|
</p>
|
|
<button @click="closeModal">Close</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
beforeMount() {
|
|
this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
|
},
|
|
data() {
|
|
return {
|
|
httpService: undefined,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
// .favorite-modal {
|
|
|
|
// position: fixed;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// transform: translate(-50%, -50%);
|
|
// padding: 20px;
|
|
// background-color: rgba(27, 39, 51, 0.1);
|
|
// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
// z-index: 1;
|
|
// }
|
|
// .modal-content {
|
|
// text-align: center;
|
|
// }
|
|
.close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.favorite-modal {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease-in-out;
|
|
&.show{
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
z-index: 999999;
|
|
|
|
}
|
|
|
|
.modal-content{
|
|
width: 650px;
|
|
background: #fff;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 10px;
|
|
|
|
}
|
|
}
|
|
</style>
|