layer弹窗自定义及向父页动态传参

原创 2016年03月23日 14:45:02

                                                           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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

layer.js使用心得-向弹出框传值问题

问题背景: 实现弹出对话框加载页面,所以我选择了独立组件layer.js。基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的...

使用layer 弹出层, 控制子父页面参数

1,原料  script type="text/javascript" src="${ctx}/jslib/jquery-1.8.3.js">script> script type="te...

SweetAlert详解

SweetAlert详解

SweetAlert2一个前端最好用的弹窗

SweetAlert2 .mui-content-padded { margin: 10px; } ...

layer:子父之间的数据传递

layer中有这样的情况,父页面与弹窗(子页面)之间的数据通信。*表单中的表单元素必须有name属性。这边我讲一下两种情况(都是以表单为例子):1、父页面的数据在弹窗(子页面)中显示。 2、子页面(...
  • DOCALLEN
  • DOCALLEN
  • 2017年03月14日 19:34
  • 10534

layer父子页面交互

layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本。 1、当layer以iframe层的方式弹出新的窗口(子页面),...

基于Layui框架的NET后台管理系统

类图:CategoryController.csusing System.Data.Entity; using System.Data.Entity.Infrastructure; using Sys...
  • WuLex
  • WuLex
  • 2017年07月08日 22:55
  • 1563

第一次遇到layer弹出层传参

做项目下载了一个后台模板,在修改的过程中遇到了{foreach $info as $k=>$v} ...

layer.open组件获取弹出层页面变量、函数

最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值。记录下解决办法。先来看layer.open函数再...

layui弹窗父子窗口之间传参数的方法

1、父页面打开子页面并向子页面传参数  function setChooseValues(ret){ var oView = document.getElementById(...
  • babyxue
  • babyxue
  • 2017年08月07日 17:32
  • 2165
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:layer弹窗自定义及向父页动态传参
举报原因:
原因补充:

(最多只允许输入30个字)