Layuiを使用したSSMフレームワークJSPによるレイヤーパップアップ効果の実現

layui.use(['jquery', 'table', 'layer', 'form'], function() {
  // Load the layui module, using its recommended [preload] method, see the [module specification] section of the website for details
  var $ = layui.$;
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;

<! -- Update the meeting pop-up layer -->
<div id="update-layer" style="display: none; padding: 20px">
  <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
    <div class="layui-form-item" style="display: none;">
      <label class="layui-form-label">ID</label>
      <div class="layui-input-block">
        <input type="text" name="id" class="layui-input" readonly>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">Conference theme</label>
      <div class="layui-input-block">
        <input type="text" name="subject" class="layui-input" lay-verify="required" autocomplete=& quot;off">
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">Remarks</label>
      <div class="layui-input-block">
        <textarea name="marks" placeholder="Please enter content" class="layui-textarea" ></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="update-form-submit"> submit</button>
        <button type="reset" class="layui-btn layui-btn-primary">reset</button>
      </div>
    </div>
  </form>
</div>

//Listen to the row tool event
    table.on('tool(test)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'del'){
        $.ajax({
          url: "/delMeeting",
          type: "POST",
          data: {id: data.id,roomShStatus: data.roomShStatus},
          success: function (msg) {
            if (msg) {
              //delete this line
              obj.del();
              //close the popup box
              layer.msg("Deleted successfully", {icon: 6});
            } else {
              layer.msg("Deletion failed", {icon: 6});
            }
          }
        });
      }
      else if(obj.event === 'update'){
        // automatically fill the form with data for the row before each display of the updated room form
        form.val('update-form', {
          "id": data.id,
          "subject": data.subject,
          "marks": data.marks
        });
        // Show the popup layer for updating the user form
        layer.open({
          type: 1,
          title: 'Update Meeting Room',
          skin: 'layui-layer-molv',
          area: ['500px'],
          content: $('#update-layer')
        });
        // Update the conference room form submission
        form.on('submit(update-form-submit)', function(data) {
          // ajax method to update the meeting room
          $.ajax({
            url: "updateMeeting",
            type: "POST",
            data: JSON.stringify(data.field),
            contentType: 'application/json',
            dataType: 'json',
            success: function(data) {
              if (data.status == 0) {
                layer.close(layer.index);
                layer.msg('update successful');
                table.reload('test');
                $("#update-user-form")[0].reset();
                layui.form.render();
              } else if(data.status == 1) {
                layer.close(layer.index);
                layer.msg('update failed');
                $("#update-user-form")[0].reset();
                layui.form.render();
              }
            },
            error: function() {
              console.log("ajax error");
            }
          });
          // prevent the form from jumping
          return false;
        })
      }
    });