Vue Js modal signup form example

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp&amp;display=swap"
    rel="stylesheet">
</head>
<body>
  <div id="app">
    <template>
      <button class="signup-button" @click="showModal">Open Signup Modal</button>
      <div v-if="isModalOpen" class="modal">
        <div class="modal-content">
          <span class="close" @click="closeModal">
            <span class="material-icons">close</span>
          </span>
          <h2>Vue Js Modal Signup Form</h2>

<form @submit.prevent="submitForm">
            <div class="form-group">
              <span class="material-icons">person</span>
              <label for="name">Name:</label>
              <input type="text" id="name" v-model="formData.name" required>
            </div>

<div class="form-group">
              <span class="material-icons">email</span>
              <label for="email">Email:</label>
              <input type="email" id="email" v-model="formData.email" required>
            </div>

<div class="form-group">
              <span class="material-icons">lock</span>
              <label for="password">Password:</label>
              <input type="password" id="password" v-model="formData.password" required>
            </div>

<button type="submit">
              <span class="material-icons">person_add</span>Sign Up
            </button>
          </form>
        </div>
      </div>
    </template>

</div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          isModalOpen: false,
          formData: {
            name: '',
            email: '',
            password: ''
          }
        };
      },
      methods: {
        showModal() {
          this.isModalOpen = true;
        },
        closeModal() {
          this.isModalOpen = false;
        },
        submitForm() {
          // Handle form submission logic here
          console.log('Form submitted:', this.formData);
          // You can make an API call or perform any other action here
          // to process the form data
          this.closeModal();
        }
      }
    });
  </script>
  <style scoped>
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }

.modal-content {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 4px;
      max-width: 400px;
      width: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }

.close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }

h2 {
      margin-bottom: 20px;
      text-align: center;
    }

form {
      display: flex;
      flex-direction: column;
    }

.form-group {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

.form-group label {
      margin-left: 10px;
      flex-shrink: 0;
      width: 100px;
    }

input[type="text"],
    input[type="email"],
    input[type="password"] {
      flex-grow: 1;
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #ccc;
      font-size: 16px;
      margin-top: 5px;
      outline-color: #0000FF;
    }

button[type="submit"] {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px 12px;
      border: none;
      border-radius: 4px;
      background-color: #0000FF;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }

button[type="submit"]:hover {
      background-color: #007BFF;
    }

.material-icons {
      margin-right: 5px;
    }

.signup-button {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

.signup-button:hover {
      background-color: #0056b3;
    }
  </style>

</body>

</html>