gistfile1.txt

<template>
  <transition name="fade">
  <div class="mapInfoModal" v-if="show">
    <div class="mapInfoModalFrame">
      <div class="close" @click="onCloseClick">x</div>
      <div class="mapInfoModalContent">
        Text content
      </div>
      <div class="arrow"></div>
    </div>
  </div>
  </transition>
</template>

<script>

export default {
  name: 'MapInfoModal',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  mounted () {

  },
  computed: {

  },
  methods: {
    onCloseClick (event) {
      this.$emit('close')
    }
  },
  watch: {

  }
}
</script>

<style scoped lang="scss">

.mapInfoModal {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  pointer-events: none;

  .mapInfoModalFrame {

    margin: auto;
    top: 30%;
    width:70%;
    height:60%;
    background: white;
    color: #000000;
    max-width:500px;

    .mapInfoModalContent {
      padding: 10px;
      width:100%;
      height:100%;
      pointer-events: auto;
    }

    .arrow {
      position: relative;
      transform: rotate(45deg);
      background: white;
      left: 50%;
      height: 30px;
      display: block;
      width: 30px;
      bottom:15px;
      margin-left: -15px;
    }

    .close {
      color: #000000;
      position: relative;
      right:10px;
      top:10px;
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>