SimpleModal.vue

<template lang="pug">
.simple-modal
  .outer(@click="hide", :style="active ? { opacity: 1, visibility: 'visible'} : { opacity: 0, visibility: 'hidden' }")
    .inner(:class="{'-medium': size == 'medium', '-large': size == 'large'}" @click.stop="")
      .header(v-if="header")
        slot(name="header")
      .content
        slot
      .footer(v-if="footer")
        slot(name="footer")
</template>

<script lang="coffee">
export default
  props:
    header:
      type: Boolean
      require: false
      default: false
    footer:
      type: Boolean
      require: false
      default: false
    size:
      type: String
      require: false
      default: 'medium'
      validator: (val) -> _.includes ['medium', 'large'], val
  data: ->
    active: false
  methods:
    show: -> @active = true
    hide: -> @active = false
    toggle: -> @active = !@active
</script>

<style lang="stylus" scoped>
.simple-modal
  > .outer
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    padding-top: 10em
    background-color: rgba(#000, 0.85)
    text-align: left
    z-index: base-z-index + 100
    > .inner
      background-color: white
      color: black
      border-radius: base-border-radius
      margin-top: 0
      margin: auto
      max-height: 95%
      overflow: auto
      position: relative
      &.-medium
        width: 50%
      &.-large
        width: 90%
      > .header
        padding: base-spacing
        border-bottom: bold-border-size black
      > .content
        padding: base-spacing
      > .footer
        border-top: bold-border-size black
        padding: base-spacing
</style>