【Thinkphp5】封装layer弹窗方法

1 官网下载layer

2 引入文件:

<!--layer,官网可下载-->
<script type="text/javascript" src="/static/home/layer/jquery.min.js"></script>
<script type="text/javascript" src="/static/home/layer/layer.js"></script>
<!--封装JS-->
<script type="text/javascript" src="/static/home/layer/layershow.js"></script>

html代码部分

<a href="javascript:;" onclick="edit('编辑','/home/ucbs/cate_edite?cate_id={$vo.cate_id}','1','800','500')">编辑</a>

js部分:

<script type="text/javascript">

/*编辑*/
function edit(title,url,id,w,h){
layer_show(title,url,w,h);
}
</script>

3 layershow.js

/*弹出层*/
/*
参数解释:
title 标题
url 请求的url
id 需要操作的数据id
w 弹出层宽度(缺省调默认值)
h 弹出层高度(缺省调默认值)
*/
function layer_show(title,url,w,h){
if (title == null || title == '') {
title=false;
};
if (url == null || url == '') {
url="404.html";
};
if (w == null || w == '') {
w=800;
};
if (h == null || h == '') {
h=($(window).height() - 50);
};
layer.open({
type: 2,
area: [w+'px', h +'px'],
fix: false, //不固定
maxmin: true,
shade:0.4,
title: title,
content: url
});
}
/*关闭弹出框口*/
function layer_close(){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
上一篇:学习ASP.NET Core Razor 编程系列八——并发处理


下一篇:Scss 与 Sass 是什么,他们的区别在哪里?