layer弹窗自定义及向父页动态传参
layer弹窗自定义及向父页动态传参
做项目中需要用到弹出框在父页面内弹出对话框供用户选择信息，然后将用户选择传回父页面的需求。查找网上资料，发现layer弹窗插件是个好东西，能完美的实现本人需要的功能。以下写一个小Demo记录下来，以便以后查找。
首先从官网下载js插件包。
layer官网：http://layer.layui.com/
下载后的包结构如下：
页面test.jsp部分代码如下：
<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.sql.*" errorPage=""%>
<%
String path = request.getContextPath();
// 获得本项目的地址(例如: http://localhost:8080/MyApp/)赋值给basePath变量
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
// 将 "项目路径basePath" 放入pageContext中，待以后用EL表达式读出。
pageContext.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="<%=basePath%>static/js/jquery-1.8.2.min.js"></script>
<script src="<%=basePath%>static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/jquery.form.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/sweet-alert.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/layer/layer.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/css/sweet-alert.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<script type="text/javascript">
$(function(){
$("#addSpecialNo").click(function(){
/*
layer.config({
skin: 'demo-class'
});
*/
layer.open({
type: 1,
area: ['600px', '400px'], //宽和高
skin: 'layui-layer-lan', //加上边框：layui-layer-rim；深蓝：layui-layer-lan；墨绿：layui-layer-molv
offset: ['60px', '240px'], //屏幕坐标位置
shadeClose: true, //点击遮罩关闭
closeBtn: 1, //0:不显示关闭按钮; 1:显示关闭按钮
content: $("#showbox"),
btn: ['确认','取消'], //按钮1和按钮2的回调分别是yes和cancel，而从按钮3开始，则回调为btn3: function(){}，以此类推
yes: function(index,layero){
var showtab = document.getElementById("showtab");
var n = 0;
var specialNo='';
$("input[name='chk']:checked").each(
function() { // 遍历选中的checkbox
n = $(this).parents("tr").index(); // 获取checkbox所在行的顺序
if(specialNo==''){
specialNo = showtab.rows[n].cells[2].innerHTML;
}else{
specialNo = specialNo +','+ showtab.rows[n].cells[2].innerHTML;
}
});
alert('确认测试'+':所选专用号:' + specialNo);
$("#involveSpecialNo").attr("value",specialNo);
layer.close(index);
//按钮【确认】的回调
},
cancel: function(index){
//按钮【取消】的回调
alert('取消测试');
}
/* content: '\<\div style="padding:20px;">涉及专用号\
<table class="tab">\
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"><\/input><\/td> <td style="width:50px;">1<\/td> <td style="width:100px;">XYZW125678<\/td></tr>\
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"><\/input><\/td> <td style="width:50px;">2<\/td> <td style="width:100px;">XYZW125678<\/td></tr>\
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"><\/input><\/td> <td style="width:50px;">3<\/td> <td style="width:100px;">XYZW125678<\/td></tr>\
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"><\/input><\/td> <td style="width:50px;">4<\/td> <td style="width:100px;">XYZW125678<\/td></tr>\
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"><\/input><\/td> <td style="width:50px;">5<\/td> <td style="width:100px;">XYZW125678<\/td></tr>\
<\/table><\/div>' */
});
/*
swal({
title: "涉及专用号",
text: "这里可以输入并确认:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
//animation: "slide-from-top",
inputPlaceholder: "请输入涉及专用号"
}, function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("请输入!");
return false;
}
swal("棒极了!", "您填写的是: " + inputValue, "success");
});
*/
});
});
</script>
<style>
#showbox{width:520px; height:300px; background: #ffffff; display:none;}
</style>
</head>
<body>
<div id="showbox" style="padding:20px;">涉及专用号
<table id="showtab" class="showtab">
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"></input></td> <td style="width:50px;">1</td> <td style="width:100px;">XYZW125678</td></tr>
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"></input></td> <td style="width:50px;">2</td> <td style="width:100px;">XYZW225678</td></tr>
<tr style="height:45px;"> <td style="width:50px;"><input type="checkbox" name="chk"></input></td> <td style="width:50px;">3</td> <td style="width:100px;">XYZW325678</td></tr>
</table>
</div>
<div>
<table>
<tr style="height:45px;">
<td colspan="2" style="text-align:center;vertical-align:middle;">
<label style="color:#086ebf;align：center;"><Strong>涉及专用号:</Strong></label>
</td>
<td colspan="3" >
<input id="involveSpecialNo" style="height:65%; width:360px; background-color:#e4e4e4;border-style:solid;border-color:#B0B0B0;border-width:thin;" type="text" value = "${involveSpecialNo}" readonly="readonly" />
</td>
<td colspan="1" >
<input id="addSpecialNo" class="addSpecialNo" type="button" value="添加" style="height:60%;" />
</td>
</tr>
</table>
</div>
</body>
</html>
实现效果截图：
总结：本来打算用sweetAlert实现的，但是发现sweetAlert功能不全，只适合做提示框，无法加载动态的自定义的html内容。
sweetAlert只能选择简单的输入操作：
上面页面的实现代码：test1.jsp
以下引用了helloweba.com的部分代码：http://www.helloweba.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>漂亮实用的提示框插件SweetAlert</title>
<meta name="keywords" content="Javascript" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<style>
.demo{width:300px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
.demo{width:500px; margin:60px auto 10px auto}
}
button, .button {
background-color: #AEDEF4;color: white;border: none;box-shadow: none;
font-size: 17px;font-weight: 500;font-weight: 600;
border-radius: 3px;padding: 15px 35px;margin: 26px 5px 0 5px;cursor: pointer; }
button:hover, .button:hover {background-color: #a1d9f2; }
</style>
<script src="sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert.css">
</head>
<body>
<div id="main">
<div class="demo">
<div class="demo1">
提示确认：<button>点击这里</button>
</div>
<div class="demo2">
定义内容：<button>点击这里</button>
</div>
<div class="demo3">
确认输入：<button>点击这里</button>
</div>
</div>
</div>
<script>
$(function(){
$(".demo1 button").click(function(){
swal({
title: "您确定要删除吗？",
text: "您确定要删除这条数据？",
type: "warning",
showCancelButton: true,
closeOnConfirm: false,
confirmButtonText: "是的，我要删除",
confirmButtonColor: "#ec6c62"
}, function() {
$.ajax({
url: "do.php",
type: "DELETE"
}).done(function(data) {
swal("操作成功!", "已成功删除数据！", "success");
}).error(function(data) {
swal("OMG", "删除操作失败了!", "error");
});
});
});
$(".demo2 button").click(function(){
swal({
title: "Good!",
text: '自定义<span style="color:red">图片</span>、<a href="#">HTML内容</a>。<br/>5秒后自动关闭。',
imageUrl: "images/thumbs-up.jpg",
html: true,
timer: 5000,
showConfirmButton: false
});
});
$(".demo3 button").click(function(){
swal({
title: "输入框来了",
text: "这里可以输入并确认:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "填点东西到这里面吧"
}, function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("请输入!");
return false
}
swal("棒极了!", "您填写的是: " + inputValue, "success");
});
});
});
</script>
</body>
</html>