showModal中实现弹窗中多个文本框输入

在JavaScript或相关的前端框架（如Vue.js、React.js）中，`showModal`通常用于展示模态窗口或对话框，其中可以包含多个文本框供用户输入信息。例如，在Vue组件中，你可以创建一个包含多个`v-model`绑定的`<input>`元素：

<template>
  <button @click="showModal">打开弹窗</button>
  <transition name="fade">
    <div v-if="isModalVisible" class="modal">
      <div class="modal-content">
        <form @submit.prevent="handleFormSubmit">
          <input type="text" v-model="inputField1" placeholder="请输入字段1">
          <input type="text" v-model="inputField2" placeholder="请输入字段2">
          <!-- 更多文本框... -->
          <input type="text" v-model="inputFieldN" placeholder="请输入最后一个字段">
          <button type="submit">提交</button>
        </form>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isModalVisible: false,
      inputField1: '',
      inputField2: '',
      // ... 以及其他文本框对应的变量
    };
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    },
    handleFormSubmit(e) {
      e.preventDefault(); // 阻止表单默认提交行为
      // 在这里处理用户的输入并关闭弹窗
      this.isModalVisible = false;
    }
  }
};
</script>

在这个例子中，每当点击按钮触发`showModal`函数，模态框就会显示出来，用户可以在文本框中输入内容，当点击提交按钮时，数据会被收集并通过`handleFormSubmit`方法进一步处理。