实现的功能:
首先第一步
在官方下载 layer 的文件. layUI 官网: http://layer.layui.com/ http://layer.layui.com/
layer 文件的下载步骤如下:
然后将完整的 layer 文件复制在你当前的项目. 如下:
引入 jQuery.JS 和 layer.JS, 注意: jQuery.JS 必须在 layer.JS 前面而且 jQuery.JS 必须是 1.8 版本或者以上的
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">
- </script>
- // 我的 jQuery.JS 不是项目内的
- <script type="text/javascript" src="<%=path %>/layer/layer.js">
- </script>
假如你的浏览器的控制台出现:
- layer.JS:2 Uncaught TypeError: i is not a function
- at Object.o.run (layer.JS:2)
- at layer.JS:2
- at layer.JS:2
- at layer.JS:2
- leaveExamine_list.jsp:92 Uncaught TypeError: layer.open is not a function
- at Eject (XXX.jsp:92)
- at htmlButtonElement.onclick
- Uncaught SyntaxError: Invalid or unexpected token
- XXX.jsp:65 Uncaught ReferenceError: test is not defined
- at HTMLButtonElement.onclick (leaveExamine_list.jsp:65)
- onclick @ leaveExamine_list.jsp:65
说明内的 jQuery.JS 不是 1.8 版本或者以上的, 或者是在 layer.JS 的后面, 或者是你触发按钮的 JS 方法和 layer 的 JS 文件或者 CSS 文件有重名;
按钮弹出层代码:
<button id ="test" class="button border-main" type="button" onclick = "Eject()"> 预览 </button>
JS 的方法:
- function Eject() {
- layer.open({
- type: 2,
- title: '请假详情',
- shadeClose: true,
- shade: 0.8,
- area: ['60%', '90%'], // 宽高
- ontent: 'leave_preview1.jsp?leaveID= <%=leaveID%>' //iframe 的 url
- });
- }
来源: https://www.cnblogs.com/chuangqi/p/10878788.html