这次给大家带来jquery layui弹出层使用详解，jquery layui弹出层使用的注意事项有哪些，下面就是实战案例，一起来看一下。
Jquery必须大于1.83
layui必须是all，否则不显示
html代码
主要js代码
$('input#about').on('click', function () {
layer.confirm('是否要修改123的考勤？', {
btn: ['确定', '取消', ] //按钮
},
function () {
layer.msg('修改成功', { time: 800, icon: 1 });
// layer.msg('网络连接失败', { time: 800, icon: 2 });
},
function () {
layer.msg('未作任何修改', {
time: 800, //20s后自动关闭
});
}
);
});
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：

班级修改和删除（修改用到了弹出层）


弹出层页面

<div class="layui-input-block layui-form" id="modifyClass"
		lay-filter="updateClass" style="margin-top: 30px"">
		<form class="layui-form" action="" lay-filter="example">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">年级</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="grade1" id="grade1"
							placeholder="例：2016" readonly="true">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">班级编号</label>
				<div class="layui-input-inline">
					<input type="text" name="classid1" required lay-verify="required" readonly="true"
						placeholder="请输入班级编号" autocomplete="off" class="layui-input"
						id="classid1">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">班级名称</label>
				<div class="layui-input-inline">
					<input type="text" name="classname1" id="classname1" required
						lay-verify="required" placeholder="请输入班级名称" autocomplete="off"
						class="layui-input">
				</div>
				<!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">专业</label>
				<div class="layui-input-inline">
					<select name="majorid" lay-verify="required" id="majorid1"
						lay-filter="majorid1">
						<option value="">请选择</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="enmodify">确认修改</button>
				</div>
			</div>
		</form>
	</div>


主页面的js(其中content: ‘./displayClass.html’, 即为引入弹出层页面；success: function(layero, index){…} …即为给弹出层页面内容赋值)

//监听 修改、删除行事件
	table.on('tool(table1)',function(obj){
	    var data1 = obj.data;
	  	if(obj.event === 'del'){
	      	layer.confirm('想好要删除了么？', function(index){
	    	  	$.ajax({
	    			url:"../../ClassesDeleteServlet",
	    		  	data:{"classid": data1.classid},
	    			type:"post",
	    			dataType:"json",
	    		  	success:function (data) {
	    			 	if (data == 0) {
	    				    layer.msg('删除失败！',{icon:5,offset:"auto",time:2000});//提示框
					  	}else{
						    layer.msg('删除成功！',{icon:6,offset:"auto",time:2000});//提示框
					  	}
	    		 	}  
	    	 	});  
	            return false; 
	     	});
	    } else if(obj.event === 'edit'){
	    	layer.open({
	    		type: 2
	    		,title: "修改班级信息"
	    		,area: ['45%', '70%']
	    		,content: './displayClass.html',
	    		success: function(layero, index){
	    			var body = layer.getChildFrame('body', index);
	    		    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象
	    		    body.find('#classid1').val(data1.classid);
	    		    body.find('#classname1').val(data1.classname);
	    		    body.find('#grade1').val(data1.grade);
	    		    
	    		    //为弹框页面专业下拉框赋值
	    		    $.ajax({
	    				url : '../../MajorFindAllServlet?deptid=5',
	    				dataType : 'json',
	    				data : {
	    					'state' : 0
	    				}, //查询状态为正常的所有机构类型
	    				type : 'post',
	    				success : function(data) {
	    					$.each(data, function(index, item) {
	    						if (item.majorid == data1.majorid) {
	    							body.find('#majorid1').append($("<option>").attr("value",item.majorid).attr("selected","selected").text(item.majorname));
								}else  {
									body.find('#majorid1').append($("<option>").attr("value",item.majorid).text(item.majorname));
								}
	    					});
	    					iframeWin.layui.form.render("select");
	    				}
	    			});
	    		  }
	    	 });
	    };
	})


弹出层提交表单监听(layer.msg(‘修改成功！’,{icon:6,offset:“auto”,time:2000});//提示框2秒自动消失)

form.on('submit(enmodify)',function(data){
				$.ajax({
					url:'../../ClassUpdateServlet',
					data:{
						classid:$("#classid1").val(),
						classname:$("#classname1").val(),
						grade:$("#grade1").val(),
						majorid:$("#majorid1").val()
					},
					success:function(data){
						if (data == 0) {
							layer.msg('修改失败！',{icon:5,offset:"auto",time:2000});//提示框
						}else  {
							layer.msg('修改成功！',{icon:6,offset:"auto",time:2000});//提示框
						}
						
						setTimeout(function(){
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);//关闭弹出层
							parent.location.reload();//重新加载父页面表格
						}, 2100);
					}
				})
				return false;
			});

1.在layer下新建文件夹和css 文件:
2.123.css
body .layui-ext-yourskin .layui-layer-btn0{
border-color: #55ff83;
background-color: #5aff53;
color: #4736ff;
}
3.123.html文件
Title
一个标准的按钮
layui.use(['form','layer','jquery'], function(){
var form = layui.form;
var layer=layui.layer;
var $=layui.jquery;
layer.config({
extend: 'zidiny/123.css' //同样需要加载新皮肤
});
$("#button").click(function () {
layer.open({
title: '在线调试'
,skin: 'layui-ext-yourskin' //只对该层采用myskin皮肤
,content: '可以填写任意的layer代码'
});
})
});
4.效果

在使用layui弹出层时，浏览器出现报错：TypeError: layer.open is not a function

报错错误如图：


修改：

添加
var layer = layui.layer;
var $ = layui.jquery;

如图：


layui弹出层的官方文档上提到过这句话，但是注释了独立版layer不需要执行，我在自己写的时候，，，少写了一句话，所以最好还是复制吧，这个问题出现的频率太少了，网上都找到不到。。。


PS：layui 的三大独立组件：layer 通用型弹出层（这就是官方文档中说的独立版layer，不需要上诉语句）；layDate 日期与时间组件；layim 网页即时通讯；

请注意：如果你不想使用 layui，而只是要单独使用上述组件，你必须采用组件的独立包（去组件各自的官网下载）

网址：https://www.layui.com/alone.html