Hiding div/popup on page load until button click

I have a working modal in Vue, however, the modal loads empty for a split second on page load and I want it to remain completely hidden (even on page load) until the button is clicked.

I tested with display:none in the CSS which works to hide it on page load, but it remains completely hidden when pushing the button then. I tried to combat this by binding a conditional style to the div but still no luck.

How can I keep the functionality of this modal with the button click while allowing it to have display:none at page load?

var vm = new Vue({
  el: "#app",
  props: {},
  data: {
    showDetailModal: false,
  },
  methods: {
    openModal() {
      console.log(this.showDetailModal);
      this.showDetailModal = true;
      console.log(this.showDetailModal);
    }
  },
});

.modal-vue .overlay {
  //display: none;
  text-align: center;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal-vue .modal {
  //display: none;
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}

.modal-vue .close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div @click="openModal()">
    Open Modal
  </div>

  <div class="modal-vue" v-if="showDetailModal" :style="'display: ' + (showDetailModal ? 'block' : 'none')">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>Testing</h3>
    </div>
  </div>

</div>

Answer

I think the problem is that you change :style="'display: ' + (showDetailModal ? 'block' : 'none')" on .modal-vue but define in your CSS display: none for .modal-vue .modal.

So you should define it in this way:

.modal-vue {
  display: none;
}

Working example:

var vm = new Vue({
  el: "#app",
  props: {},
  data: {
    showDetailModal: false,
  },
  methods: {
    openModal() {
      console.log(this.showDetailModal);
      this.showDetailModal = true;
      console.log(this.showDetailModal);
    }
  },
});

.modal-vue .overlay {
  //display: none;
  text-align: center;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal-vue {
  display: none;
}

.modal-vue .modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}

.modal-vue .close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div @click="openModal()">
    Open Modal
  </div>

  <div class="modal-vue" v-if="showDetailModal" :style="'display: ' + (showDetailModal ? 'block' : 'none')">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>Testing</h3>
    </div>
  </div>

</div>