79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<!-- Modal -->
|
|
<div class="modal fade modal-component" :id="this.cmsWidgetName" tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body ps-4 pe-4 pt-5 pb-4">
|
|
<img :src="this.ModalImage" class="w-100 mb-4" alt="" />
|
|
<h5 class="mb-4" v-html="this.ModalHeadline"></h5>
|
|
<p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
|
|
<p class="mb-0" v-html="this.ModalBodyText"></p>
|
|
</div>
|
|
<div class="modal-footer px-4 pt-4 pb-5">
|
|
<button class="btn btn-secondary w-100" data-bs-dismiss="modal" v-html="this.ModalCloseButtonText"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'modal',
|
|
props: {
|
|
cmsWidgetName: String,
|
|
},
|
|
computed: {
|
|
ModalHeadline(){
|
|
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
|
|
},
|
|
ModalSubheadertext(){
|
|
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
|
|
},
|
|
ModalBodyText(){
|
|
return this.getCmsContent(this.cmsWidgetName, "BodyText");
|
|
},
|
|
ModalImage(){
|
|
return this.getCmsContent(this.cmsWidgetName, "Image");
|
|
},
|
|
ModalCloseButtonText(){
|
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.modal {
|
|
h5,
|
|
strong,
|
|
.subheader-text {
|
|
color: $black;
|
|
}
|
|
&.modal-component {
|
|
.modal-dialog {
|
|
.modal-content {
|
|
max-width: 327px;
|
|
margin: 0 auto;
|
|
box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
|
|
.modal-body {
|
|
ul {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.modal-footer {
|
|
border-top: none;
|
|
button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.modal-backdrop {
|
|
&.show {
|
|
opacity: .4;
|
|
}
|
|
}
|
|
</style>
|