Vue Js Modal Popup Example

<!DOCTYPE html>
<html>

<body>

<div id="app">
    <h3>Vue Js Popup Modal</h3>
    <button class="popup-button" @click="openPopup">Open Popup</button>
    <div class="modal" v-if="showPopup">
      <div class="modal-content" ref="modalRef">
        <button class="close-x" @click="closePopup"> X</button>
        <div class="modal-header">
          <h1>Vue Js Modal Popup</h1>
        </div>
        <div class="modal-body">
          <p>This is some text inside the popup.</p>
        </div>

<button class="close-button" @click="closePopup">Close</button>
          <button class="save-button" @click="saveModal">Save</button>
        </div>

</div>
    </div>

</div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          showPopup: false,
        }
      },

methods: {
        saveModal() {
          alert('Successfully Save data')
          this.closePopup();
        },
        openPopup() {
          this.showPopup = true;
          document.addEventListener('mouseup', this.closeModalOnClickOutside);
        },
        closePopup() {
          this.showPopup = false;
          document.removeEventListener('mouseup', this.closeModalOnClickOutside);
        },
        closeModalOnClickOutside(event) {
          const modal = this.$refs.modalRef;
          if (!modal.contains(event.target)) {
            this.closePopup();
          }
        }

});
    app.mount('#app');
  </script>
  <style>
    .popup-button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

.modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

.modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 5px;
      max-width: 500px;
      width: 80%;
      position: relative;
    }

.close-x {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 5px;
      background-color: transparent;
      border: none;
      cursor: pointer;
      font-size: 18px;
      color: #555;
    }

.close-x:hover {
      color: #ff0000;
      /* Change to your desired hover color */
    }

.modal-header {
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }

.modal-body {
      padding: 10px 0;
    }

.modal-footer {
      padding-top: 10px;
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: flex-end;
    }

.close-button,
    .save-button {
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-weight: bold;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

.close-button {
      background-color: #f44336;
      color: white;
    }

.save-button {
      background-color: #4CAF50;
      color: white;
      margin-left: 10px;
    }

.close-button:hover {
      background-color: #d32f2f;
    }

.save-button:hover {
      background-color: #45a049;
    }
  </style>
</body>

</html>