DrawDeleteModal.vue

<template>
  <div>
    <div
      v-if="showModal"
      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <div class="relative w-auto my-6 mx-auto max-w-sm">
        <!--content-->
        <div
          class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none"
        >
          <!--header-->
          <div
            class="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t"
          >
            <h3 class="text-3xl font-semibold">Delete Numbers</h3>
            <button
              class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
              v-on:click="toggleModal()"
            >
              <span
                class="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
              >×</span>
            </button>
          </div>
          <!--body-->
          <div class="relative p-6 flex-auto">
            <p
              class="my-4 text-gray-600 text-lg leading-relaxed"
            >Are you sure you want to delete these numbers?</p>
          </div>
          <!--footer-->
          <div
            class="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b"
          >
            <button
              class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1"
              type="button"
              style="transition: all .15s ease"
              v-on:click="toggleModal()"
            >Close</button>

            <a
              :href="endpoint"
              class="text-white bg-red-600 border border-solid border-red-500 hover:bg-red-500 hover:bg-red-800 active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1"
              type="button"
              style="transition: all .15s ease"
              v-on:click="toggleModal()"
            >Confirm Delete</a>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
</template>

<script>
export default {
  name: "draw-delete-modal",
  data() {
    return {
      showModal: false,
      endpoint: null
    };
  },
  methods: {
    toggleModal: function(endpoint) {
      if (endpoint) {
        this.endpoint = endpoint;
      } else {
        this.endpoint = null;
      }
      this.showModal = !this.showModal;
    }
  }
};

</script>