点击按钮出现弹窗，弹窗的背景为灰色，字体为白色vue

您可以使用Vue.js中的模态框（Modal）组件来实现该功能。在模态框中设置背景颜色为灰色，字体颜色为白色即可。以下是一个简单的示例代码：

<template>
  <div>
    <button @click="showModal = true">点击打开弹窗</button>
    <div class="modal" v-if="showModal">
      <div class="modal-content">
        <span class="close" @click="showModal = false">&times;</span>
        <p>这是一个弹窗</p>
      </div>
    </div>
  </div>
</template>

<style>
  .modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: white;
    color: black;
    padding: 20px;
    border-radius: 5px;
    width: 50%;
  }

  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
</style>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个按钮，当用户点击该按钮时，会设置showModal为true，从而显示模态框。模态框的样式通过CSS设置，包括背景颜色、字体颜色、宽度、边框等。模态框中包含一个关闭按钮，当用户点击时，会设置showModal为false，从而关闭模态框。