1 官網下載layerjavascript
2 引入文件:html
<!--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代碼部分java
<a href="javascript:;" onclick="edit('編輯','/home/ucbs/cate_edite?cate_id={$vo.cate_id}','1','800','500')">編輯</a>
js部分:jquery
<script type="text/javascript"> /*編輯*/ function edit(title,url,id,w,h){ layer_show(title,url,w,h); } </script>
3 layershow.js url
/*彈出層*/ /* 參數解釋: 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); }