jsp中利用Jquery和LayUI点击按钮弹出修改用户信息的美观模态框有数据

好的，可以参考以下代码实现美观的模态框效果：

1. HTML页面

<!-- 引入LayUI样式文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<!-- 引入Jquery文件 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入LayUI文件 -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>

<!-- 编辑按钮 -->
<button class="layui-btn layui-btn-normal" id="editBtn">编辑</button>

<!-- 模态框 -->
<div id="editModal" class="layui-form layui-form-pane" style="display:none;">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="0" title="男" checked>
      <input type="radio" name="sex" value="1" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-inline">
      <input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
</div>

2. Jquery代码

// 点击编辑按钮，弹出模态框
$('#editBtn').click(function () {
  // 假设已经获取到了用户信息
  var userInfo = {
    username: '张三',
    sex: 1,
    age: 18
  };
  // 将用户信息填充到模态框中
  $('#username').val(userInfo.username);
  $('input[name="sex"][value="' + userInfo.sex + '"]').prop('checked', true);
  $('#age').val(userInfo.age);
  // 弹出模态框
  layer.open({
    type: 1,
    title: '修改用户信息',
    content: $('#editModal'),
    area: ['500px', '300px'],
    btn: ['保存', '取消'],
    skin: 'layui-layer-lan',
    yes: function(index, layero) {
      // 点击保存按钮后的操作
      // 获取表单数据
      var formData = {
        username: $('#username').val(),
        sex: $('input[name="sex"]:checked').val(),
        age: $('#age').val()
      };
      // TODO: 发送请求保存数据
      // 关闭模态框
      layer.close(index);
    }
  });
});

3. LayUI代码

<!-- 引入LayUI样式文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<!-- 引入Jquery文件 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入LayUI文件 -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>

<!-- 编辑按钮 -->
<button class="layui-btn layui-btn-normal" id="editBtn">编辑</button>

<!-- 模态框 -->
<div id="editModal" class="layui-form layui-form-pane" style="display:none;">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-inline">
      <input type="radio" name="sex" value="0" title="男" checked>
      <input type="radio" name="sex" value="1" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-inline">
      <input type="text" name="age" id="age" lay-verify="number" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
</div>

<script>
// 点击编辑按钮，弹出模态框
$('#editBtn').click(function () {
  // 假设已经获取到了用户信息
  var userInfo = {
    username: '张三',
    sex: 1,
    age: 18
  };
  // 将用户信息填充到模态框中
  $('#username').val(userInfo.username);
  $('input[name="sex"][value="' + userInfo.sex + '"]').prop('checked', true);
  $('#age').val(userInfo.age);
  // 弹出模态框
  layer.open({
    type: 1,
    title: '修改用户信息',
    content: $('#editModal'),
    area: ['500px', '300px'],
    btn: ['保存', '取消'],
    skin: 'layui-layer-lan',
    yes: function(index, layero) {
      // 点击保存按钮后的操作
      // 获取表单数据
      var formData = {
        username: $('#username').val(),
        sex: $('input[name="sex"]:checked').val(),
        age: $('#age').val()
      };
      // TODO: 发送请求保存数据
      // 关闭模态框
      layer.close(index);
    }
  });
});
</script>

注意：需要在Jquery代码中先引入Layer组件，具体可以参考代码中的第二行和第三行。此外，为了美观，可以在弹出模态框时设置skin属性为'layui-layer-lan'，表示使用蓝色主题。