可参考layerui官网实例,这里我将一个实例单独摘出来进行测试
1.showBox.jsp页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="scripts/jquery/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
</head>
<body>
<input type="button" value="点击弹框" οnclick="showBox();">
<script>
function showBox(){
layer.open({
type: 2 //此处以iframe举例
,title: '当你选择该窗体时,即会在最顶端'
,area: ['390px', '260px']
,shade: 0
,maxmin: true
,offset: [ //为了演示,随机坐标
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-590)
]
,content: 'http://layer.layui.com/test/settop.html'
,btn: ['继续弹出', '全部关闭'] //只是为了演示
,yes: function(){
$(that).click();
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex //重点1
,success: function(layero){
layer.setTop(layero); //重点2
}
});
}
</script>
</body>
</html>
2.导入插件包文件
所需包下载地址:http://download.csdn.net/detail/u012255097/9919843
3.展示效果: