JavaScript弹窗模态框：如何添加标题与字段表头并优化样式？

问题分析 #

你的CSS存在两处核心问题：

1. .input-fields 被错误设置了边框、内边距，把容器元素当成输入框样式处理，导致整个编辑字段区域出现不必要的边框
2. 表单字段（form-fields）和编辑字段（input-fields）的标签与内容/输入框未对齐，视觉布局混乱
3. 标题样式缺乏区分度，和内容区边界模糊

修改后的完整代码 #

调整后的JSX（新增字段行容器类）

{editVote && (
  <div className="edit-modal">
    <div className="modal-content">
      <h3 className="modal-title">Edit Vote</h3>
      <div className="form-fields">
        {columns.map((column, index) => (
          <div key={index} className="form-field-row">
            <label>{column}:</label>
            <span>{editVote[columnMappings[column]] || 'N/A'}</span>
          </div>
        ))}
      </div>
      <div className="input-fields">
        <div className="input-field-row">
          <label>First Name:</label>
          <input
            type="text"
            value={editedFields.first_name}
            onChange={(e) => handleFieldChange('first_name', e.target.value)}
          />
        </div>
        <div className="input-field-row">
          <label>Last Name:</label>
          <input
            type="text"
            value={editedFields.last_name}
            onChange={(e) => handleFieldChange('last_name', e.target.value)}
          />
        </div>
        <div className="input-field-row">
          <label>Gender:</label>
          <input
            type="text"
            value={editedFields.gender}
            onChange={(e) => handleFieldChange('gender', e.target.value)}
          />
        </div>
        <div className="input-field-row">
          <label>Size:</label>
          <input
            type="number"
            value={editedFields.size}
            onChange={(e) => handleFieldChange('size', e.target.value)}
          />
        </div>
        <div className="input-field-row">
          <label>Weight:</label>
          <input
            type="number"
            value={editedFields.weight}
            onChange={(e) => handleFieldChange('weight', e.target.value)}
          />
        </div>
        <div className="input-field-row">
          <label>Birthday:</label>
          <input
            type="datetime-local"
            value={`${editedFields.birthday}T${editedFields.birthtime}`}
            onChange={(e) => handleFieldChange('birthday', e.target.value)}
          />
        </div>
      </div>
      <div className="button-container">
        <button onClick={handleUpdateClick}>Update</button>
        <button onClick={() => setEditVote(null)}>Cancel</button>
      </div>
    </div>
  </div>
)}

修正后的CSS样式

.edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保模态框在最上层 */
}

.modal-content {
  background-color: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px; /* 限制弹窗最大宽度 */
}

/* 标题样式优化 */
.modal-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.4rem;
  color: #2d3748;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 8px;
}

.form-fields {
  margin-bottom: 24px;
}

/* 表单字段行布局：标签与内容对齐 */
.form-field-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-field-row label {
  font-weight: 600;
  width: 120px; /* 固定标签宽度，确保对齐 */
  color: #4a5568;
}

.form-field-row span {
  flex: 1;
  padding: 6px 8px;
  background-color: #f7fafc;
  border-radius: 4px;
}

.input-fields {
  margin-bottom: 24px;
}

/* 编辑字段行布局：标签与输入框对齐 */
.input-field-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.input-field-row label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #4a5568;
}

.input-field-row input {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 1rem;
}

.input-field-row input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.button-container {
  display: flex;
  justify-content: flex-end; /* 按钮靠右排列 */
  gap: 10px;
}

.button-container button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.button-container button:first-child {
  background-color: #007bff;
  color: white;
}

.button-container button:first-child:hover {
  background-color: #0056b3;
}

.button-container button:last-child {
  background-color: #e2e8f0;
  color: #2d3748;
}

.button-container button:last-child:hover {
  background-color: #cbd5e0;
}

关键修改点说明

1. 标题优化：新增.modal-title类，添加底部边框、调整字号和颜色，明确区分标题与内容区
2. 修复容器样式：移除.input-fields的边框和内边距，还原其容器属性
3. 字段对齐：给每个字段对添加行容器（.form-field-row/.input-field-row），用Flex布局实现标签与内容/输入框的整齐对齐
4. 视觉层次：调整按钮为靠右排列，给取消按钮添加灰色样式，区分主次操作
5. 交互细节：添加输入框聚焦样式，提升用户操作反馈

内容的提问来源于stack exchange，提问作者Mickael Maujean