【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);
}