layer官方及演示文档：layer官方及演示文档
1、将layer整个放入工程内。
2、文件内引入layer.js，
<script type="text/javascript" src="${basePath}/scripts/layer/layer.js"></script>
3、直接就可以使用了。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>${systemName}</title> <%@ include file="/WEB-INF/pages/public/common.jspf"%> <link rel="stylesheet" type="text/css" href="${basePath}/scripts/jQuery/plugins/uploadify/uploadify.css" /> <script type="text/javascript" src="${basePath}/scripts/other/jquery.uploadPreview.js"></script> <script type="text/javascript" src="${basePath}/scripts/other/ajaxfileupload.js"></script> <script type="text/javascript" src="${basePath}/scripts/layer/layer.js"></script> <script type="text/javascript" src="${basePath}/scripts/jQuery/plugins/uploadify/jquery.uploadify.min.js?random=<%=Math.random() %>"></script> <script type="text/javascript"> //提示信息 function layerMsg(str){ layer.open({ title: false, content: '<div style="text-align:center;font-weight:bolder;">'+str+'</div>', btnAlign: 'c', offset:"t", closeBtn: 0, skin: 'layui-layer-molv' }); } $(function() { //提交表单 $("#submitButton").bind("click",function(){ var index = $("#upload_zipfile").val().lastIndexOf(".")+1; var ext = $("#upload_zipfile").val().substr(index).toUpperCase();//获得文件后缀名 var str = $("#upload_zipfile").val(); if(str==""){ showAlertDialog("<s:text name='cems.public.messageTip'/>",'文件不能为空！'); return false; } if(ext!="ZIP"){ showAlertDialog("<s:text name='cems.public.messageTip'/>",'<s:text name="cems.soft.xmlfileTypeError"></s:text>'); return false; } if($("#addForm").valid()){ $(this).attr("disabled","disabled"); wait("","<s:text name='cems.soft.progress.fileUploading'></s:text>");//遮罩提示:文件正在上传中 $.ajaxFileUpload({ url:'${basePath}/mgr/resourceAction_uploadAuthFile.do', fileElementId: 'upload_zipfile', dataType:'json', success:function(obj){ removeWait(); //移除等待效果 if(obj.result == "success"){ confirm(); }else{ $("#submitButton").removeAttr("disabled"); /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/ layerMsg('<s:text name="cems.public.msgFail"></s:text>'); } } }); } return false; }); $("#defaultButton").bind("click",function(){ $.messager.confirm('提示', '是否恢复默认授权信息?', function(r){ if (r) { $(this).attr("disabled","disabled"); wait("","<s:text name='cems.soft.progress.handling'></s:text>");//遮罩提示 $.doAjax({ url:'${basePath}/mgr/resourceAction_restore.do', async:true, success:function(responseText){ removeWait(); //移除等待效果 var obj = eval("(" + responseText + ")"); if(obj.result == "success"){ $("#submitButton").removeAttr("disabled"); if (obj.resResult == "success" || obj.polResult == "success") { /*showMsg("",'<s:text name="cems.public.msgSuccess"></s:text>',true);*/ layerMsg('<s:text name="cems.public.msgSuccess"></s:text>'); }else if(obj.resResult == "resnull" && obj.polResult == "polnull"){ /*showMsg("",'导入授权文件为空！',true);*/ layerMsg('导入授权文件为空！'); } }else{ $("#submitButton").removeAttr("disabled"); /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/ layerMsg('<s:text name="cems.public.msgFail"></s:text>'); } } }); } }); }); }); function confirm() { $.messager.confirm('提示', '上传成功，是否更新授权信息到数据库?', function(r){ if (r){ $(this).attr("disabled","disabled"); wait("","<s:text name='cems.soft.progress.handling'></s:text>");//遮罩提示 $.doAjax({ url:'${basePath}/mgr/resourceAction_update.do', async:true, success:function(responseText){ removeWait(); //移除等待效果 var obj = eval("(" + responseText + ")"); if(obj.result == "success"){ $("#submitButton").removeAttr("disabled"); if (obj.resResult == "success" || obj.polResult == "success") { /*showMsg("",'<s:text name="cems.public.msgSuccess"></s:text>',true);*/ layerMsg('<s:text name="cems.public.msgSuccess"></s:text>'); }else if(obj.resResult == "resnull" && obj.polResult == "polnull"){ /*showMsg("",'导入授权文件为空！',true);*/ layerMsg('导入授权文件为空！'); }else if(obj.resResult == "crc" || obj.polResult == "pcrc"){ /*showMsg("",'导入授权文件与原文件相同！',true);*/ layerMsg('导入授权文件与原文件相同！'); } }else{ $("#submitButton").removeAttr("disabled"); /*showMsg("",'<s:text name="cems.public.msgFail"></s:text>',true);*/ layerMsg('<s:text name="cems.public.msgFail"></s:text>'); } } }); } }); } </script> </head> <body> <center> <div style="height: 30px"></div> <div> <img src="${basePath}/images/tip.png" align="absmiddle"></img> <span style="font-weight: bold; color: #FF4500; font-size: 14px;"><s:text name="注意：请选择ZIP格式授权文件压缩包"></s:text></span> </div> <div style="height: 30px"></div> <div style=" 548px; height: 85px; background-color: #EAEAEA; border: 1px solid #DBDBDB;"> <form id="addForm" class="ajaxForm" method="post"> <table id="itemTable" class="itemTable"> <tr> <td class="leftAlign"><s:text name="cems.public.authInput"></s:text></td> <td class="rightAlign"> <input type="text" name="txt" readonly="readonly" style=" 200px;" class="inputText"/> <input type="button" value='<s:text name="cems.chooseFile"></s:text>' size="30" onclick="upload_zipfile.click()" style=" 73px;" class="inputText" /> <input type="file" id="upload_zipfile" onchange="txt.value=this.value" accept=".zip" name="zipfile" style="position:absolute; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;left: 120px; height: 25px; 200px;"/> <label class="requiredLable">*</label> </td> <td class="leftAlign"></td> </tr> </table> </form> </div> <div style="height: 30px"></div> <div class="windowButtonDiv"> <button class="buttonClass" id="defaultButton"><span><img src="${basePath}/styles/images/icons/import.png" width="14px" height="14px"></img></span><span><s:text name="cems.default"></s:text></span></button> <button class="buttonClass" id="submitButton"> <span><img src="${basePath}/styles/images/icons/ok.png" width="14px" height="14px"></img></span><span><s:text name="cems.ok"></s:text></span> </button> <button class="buttonClass" id="closeWindow"> <span><img src="${basePath}/styles/images/icons/cancel.png" width="14px" height="14px"></img></span><span><s:text name="cems.cancel"></s:text></span> </button> </div> </div> </center> </body> </html>