网页弹窗插件layer.js的使用

最新推荐文章于 2023-08-12 16:46:23 发布

默1451

最新推荐文章于 2023-08-12 16:46:23 发布

阅读量1.1k

点赞数

分类专栏：前端插件小工具

本文链接：https://blog.youkuaiyun.com/qq_19688989/article/details/74833802

版权

小工具同时被 2 个专栏收录

6 篇文章

订阅专栏

前端插件

5 篇文章

订阅专栏

本文介绍了如何使用layer.js这一网页弹窗插件。首先从layer官网下载所需文件并放入项目目录，接着引入js文件，最后参照官方文档编写js配置语句以实现弹窗功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载相关文件

http://layer.layui.com/

将所有文件放入项目目录下，包括extend和skin文件夹

layer的目录结构

二、引入js文件

三、编写js配置语句

 $('.showPopup').on('click', function(){
	 var str = "<form action='AddRemark' method='post'>"
	+"<table class='table table-striped table-bordered table-hover' id='editable' >"
	   +"<thead>"
		   +"<tr>"
			   +"<th style='text-align:center;vertical-align:middle;'>标题</th>"
			   +"<th style='text-align:center;vertical-align:middle;'>具体内容</th>"
			   +"<th style='text-align:center;vertical-align:middle;'>负责部门</th>" 
			   +"<th style='text-align:center;vertical-align:middle;'>操作</th>"                      
		   +"</tr>"
		   +"</thead>"
		   +"<tbody>"
		   +"<tr id='tr'>"
			   +"<td style='text-align:center;vertical-align:middle;'><input id='title' name='title' class='form-control' type='text'></td>"
			   +"<td style='text-align:center;vertical-align:middle;'><textarea class='form-control' id='context' name='context' rows='3'></textarea></td>"
			   +"<td style='text-align:center;vertical-align:middle;'>"
			   +"<input type='hidden' name='userId' id='userId' value='${userId}'>"
			   +"<input type='hidden' name='entryId' id='entryId' value='"+ id + "'>"
			   +"<div class='form-group'>"
			   +"<div class='input-group'>"
			   +"<select data-placeholder='请选择部门' id='depart' name='depart' class='chosen-select' multiple style='width:350px;' tabindex='4'>"
				+"</select>"
			   +"</div>"
			   +"</div>"
			   +"</td>"   
			   +"<td style='text-align:center;vertical-align:middle;'><button type='button' class='btn btn-sm btn-primary pull-center' οnclick='addRemark(" + id + ")'>添加备注</button></td>"                          
		   +"</tr>"
		   +"</tbody>"
	   +"</table>"
	+"</form>";
				
	popupIndex = layer.open({
	type: 1, //选择弹出页面层
	title: '备注', //标题
	area: ['1000px', '360px'], //弹窗大小
	shadeClose: true, //点击遮罩关闭
	content: str //弹窗内的html代码
	});
});

文档地址：http://www.layui.com/doc/modules/layer.html