最近做的系統(tǒng)里，使用layui當(dāng)作前端的框架，就是用了layui自帶的layer彈出層，效果圖如下。

首先，導(dǎo)入layui需要的css，js文件，這個(gè)就不需要多說了。但是有關(guān)鍵的一步必須要做，也是許多新手會(huì)常犯的錯(cuò)誤，就是沒有預(yù)定義layui的form和layer，導(dǎo)致表單和彈出層不顯示。

下面是layui的預(yù)定義。

layui.use(["jquery", "table", "layer", "form"], function() {  // 加載layui模塊，使用其推薦的【預(yù)先加載】方式，詳見官網(wǎng)【模塊規(guī)范】一節(jié)  var $ = layui.$;  var table = layui.table;  var layer = layui.layer;  var form = layui.form;

定義完之后可以先寫layer彈出層的表單樣式，下面是我的layer彈出層表單樣式。

<!-- 更新會(huì)議彈出層 --><div id="update-layer">  <form id="update-form" lay-filter="update-form">    <div>      <label>ID</label>      <div><input type="text" name="id" readonly>      </div>    </div>    <div>      <label>會(huì)議主題</label>      <div><input type="text" name="subject" lay-verify="required" autocomplete="off">      </div>    </div>    <div>      <label>備注</label>      <div><textarea name="remarks" placeholder="請(qǐng)輸入內(nèi)容" ></textarea>      </div>    </div>    <div>      <div><button lay-submit lay-filter="update-form-submit">提交</button><button type="reset">重置</button>      </div>    </div>  </form></div>

下面是layer彈出層需要的代碼。

//監(jiān)聽行工具事件    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) {      //刪除這一行      obj.del();      //關(guān)閉彈框      layer.msg("刪除成功", {icon: 6});    } else {      layer.msg("刪除失敗", {icon: 6});    }  }});      }      else if(obj.event === "update"){// 每次顯示更新會(huì)議室的表單前自動(dòng)為表單填寫該行的數(shù)據(jù)form.val("update-form", {  "id": data.id,  "subject": data.subject,  "remarks": data.remarks});// 顯示更新用戶表單的彈出層layer.open({  type: 1,  title: "更新會(huì)議室",  skin: "layui-layer-molv",  area: ["500px"],  content: $("#update-layer")});// 更新會(huì)議室表單提交form.on("submit(update-form-submit)", function(data) {  // ajax方式更新會(huì)議室  $.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("更新成功");table.reload("test");$("#update-user-form")[0].reset();layui.form.render();      } else if(data.status == 1) {layer.close(layer.index);layer.msg("更新失敗");$("#update-user-form")[0].reset();layui.form.render();      }    },    error: function() {      console.log("ajax error");    }  });  // 阻止表單跳轉(zhuǎn)  return false;})      }    });

直接復(fù)制上面的代碼，稍作修改，就可以生成自己想要的layer彈出層了

總結(jié)

以上所述是小編給大家介紹的SSM框架JSP使用Layui實(shí)現(xiàn)layer彈出層效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！