Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Popup components - You need to place everything in their files.
/*
import popup from '@components/blocks/popup';
components: {
'sitename-popup' : popup
}
<sitename-popup
popup_type = 'default'
popover_title = "Join our bounty program"
popover_description = "Earn tokens (LOY) by joining and completing different requirements in our bounty program."
internal_link
button_link = "/bounty-program"
button_text = "Join now"
/>
*/
<template>
<div class="sitename_popups">
<div class="page_popup box-shadow" :class="{'visible' : show_popup}" v-if="popup_type == 'default'">
<div class="close_popup" @click="close_popup('default')">
<img src="/static/close.svg" width="10px" alt="close_popup" title="close_popup">
</div>
<img :src="popover_image" class="popup_image m-b-20" >
<h4>{{popover_title}}</h4>
<p>{{popover_description}}</p>
<div class="popup_button">
<template v-if="internal_link">
<router-link
:alt="popover_title"
rel="nofollow"
:title="popover_title"
:to="button_link"
class="loycha_btn bg--primary m-b-20">
{{button_text}}
</router-link>
</template>
<template v-else>
<a
:alt="popover_title"
rel="nofollow"
:title="popover_title"
:to="button_link"
class="loycha_btn bg--primary m-b-20">
{{button_text}}
</a>
</template>
</div>
</div>
<div class="telegram_popup_join box-shadow" :class="{'visible': show_telegram_popup}" v-if="popup_type == 'telegram'">
<div class="close_popup" @click="close_popup('telegram')">
<img src="/static/close.svg" width="10px" alt="close_popup" title="close_popup">
</div>
<img src="/static/02-telegram-group.svg" class="popup_image m-b-20" >
<h4>Join our telegram community
<p>Let's join our telegram community </p>
<div class="popup_button">
<a
target="_blank"
alt="Join our telegram community"
title="Join our telegram community"
href="https://t.me/loychaOfficial"
class="loycha_btn bg--primary m-b-20">
Join now
</a>
</div>
</h4>
</div>
</div>
</template>
<script>
export default {
props:{
popup_type: {
type: String,
default:'default'
},
popover_image: {
type: String,
default:'/static/header_assets/gift.svg'
},
popover_title: {
type: String,
default: 'Default Title'
},
popover_description: {
type: String,
default: 'Lorem ipsum solores dis amte lorem ipsum solores.'
},
internal_link: {
type: Boolean,
default: false
},
button_link: {
type: String,
default: ''
},
button_link: {
type: String,
default: ''
},
button_text: {
type: String,
default: 'Learn more'
},
},
data () {
return {
show_popup: false,
show_telegram_popup: false,
}
},
methods:{
close_popup: function(popup_type){
if(popup_type == 'default'){
this.$cookie.set('popup_bounty', 'hidden', 1);
this.show_popup = false
}
if(popup_type == 'telegram'){
this.$cookie.set('popup_telegram', 'hidden', 1);
this.show_telegram_popup = false
}
}
},
mounted(){
let popup_cookie_status = this.$cookie.get('popup_bounty');
let telegram_popup_cookie_status = this.$cookie.get('popup_telegram');
if(popup_cookie_status != 'hidden'){
setTimeout(() => {
this.show_popup = true
}, 1200);
}
if(telegram_popup_cookie_status != 'hidden'){
setTimeout(() => {
this.show_telegram_popup = true
}, 1300);
}
}
}
</script>
<style lang="scss" scoped>
.page_popup{
position: relative;
width: 350px;
display: table;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
background: #fff;
z-index: 9999;
text-align: center;
border: 2px solid #f1f1f1;
border-radius: 6px;
padding: 40px;
top: 12%;
opacity:0;
transition: opacity .5s;
z-index: -1;
&.visible{
opacity: 1;
z-index: 9999;
}
.close_popup {
position: absolute;
right: 18px;
top: 18px;
background: #0055ff26;
width: 26px;
height: 26px;
border-radius: 6px;
line-height: 24px;
cursor: pointer;
text-align: center;
}
img{
&.popup_image{
width: 190px;
}
}
h4{
font-weight: bold;
}
@media screen and (max-width:525px){
top:initial;
bottom: 2%;
width:90%;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
img{
&.popup_image{
display: none;
}
}
h4{
font-size:15px;
}
p{
font-size:14px;
}
}
}
.telegram_popup_join {
position: relative;
width: 350px;
display: table;
position: fixed;
margin: 0 auto;
background: #fff;
z-index: 9999;
text-align: center;
border: 2px solid #f1f1f1;
border-radius: 6px;
padding: 40px;
opacity:0;
transition: opacity .5s;
bottom: 20px;
top: initial;
left: 20px;
right: initial;
text-align: left;
&.visible{
opacity: 1;
}
.close_popup {
position: absolute;
right: 18px;
top: 18px;
background: #0055ff26;
width: 26px;
height: 26px;
border-radius: 6px;
line-height: 24px;
cursor: pointer;
text-align: center;
}
img{
&.popup_image{
width: 35px;
display: inline-block;
}
}
h4{
display: inline-block;
font-weight: bold;
width: 211px;
margin-left: 10px;
font-size: 12px;
vertical-align: top;
p{
font-size:12px;
font-weight:400;
line-height: 19px;
margin-top: 6px;
}
.popup_button a {
font-size: 12px;
padding: 10px;
height: 27px;
margin: 0 !important;
}
}
@media screen and (max-width:525px){
opacity:0;
display:none;
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.