<template lang="html">
  <div>
    <transition name="am-fade">
      <div class="mask" v-show="showMask" @click="toggleShow"></div>
    </transition>
    <button type="button" name="button" @click="toggleShow">show</button>
    <transition name="am-zoom">
      <div class="rc-modal-wrap">
        <div class="header">
          温馨提示
        </div>
        <div class="body">
          为了确保您的安全，的洒进房间酸辣粉卡拉斯京法拉盛地方
        </div>
        <div class="footer">
          <span>我知道了</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
const prefixCls = 'rc-modal';

export default {
  name: 'Modal',
  data() {
    return {
      showMask: false,
      prefixCls: prefixCls,
      wrapShow: false,
      showHead: true,
      buttonLoading: false
    }
  },
  methods: {
    toggleShow() {
      this.showMask = !this.showMask;
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../style/animate';
.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.2);
}
</style>
