markchristianlacap
Addict
- Joined
- Dec 15, 2015
- Posts
- 5
- Reaction
- 0
- Points
- 65
- Age
- 27
Create new file on components
modal.vue
how to use?
modal.vue
Code:
<template>
<div :id="id" class="modal" aria-hidden="true">
<div class="modal-dialog">
<a href="#" class="close" aria-label="Close Modal Box"
><i class="fas fa-times"></i
></a>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
id: {
type: String,
default: "",
},
},
};
</script>
<style lang="scss" scoped>
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
max-width: 100%;
margin: 0 10em 0 -5em;
border-radius: 5px;
position: fixed;
z-index: 11;
min-width: 360px;
transform: translate(0, -500%);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
.close {
position: fixed;
top: 0;
right: 0;
color: #333;
margin: 0.1em 0.2em;
}
#close {
display: none;
}
</style>
how to use?
Code:
<template>
<div>
<!--Make sure the id is the same on href -->
<a href="#preview-modal">open modal</a>
<modal id="preview-modal">
<div>
<h2>This is the content of modal</h2>
</div>
</modal>
</div>
</template>
import modal from "~/components/modal";
export default {
components: { modal }
}