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

我就是我 2022-07-27 14:39 68阅读 0赞

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

做项目中需要用到弹出框在父页面内弹出对话框供用户选择信息，然后将用户选择传回父页面的需求。查找网上资料，发现layer弹窗插件是个好东西，能完美的实现本人需要的功能。以下写一个小Demo记录下来，以便以后查找。

首先从官网下载js插件包。

layer官网：[http://layer.layui.com/][http_layer.layui.com]

![Center][]

下载后的包结构如下：

![Center 1][]

页面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>

实现效果截图：

![Center 2][]

![Center 3][]

总结：本来打算用sweetAlert实现的，但是发现sweetAlert功能不全，只适合做提示框，无法加载动态的自定义的html内容。

sweetAlert只能选择简单的输入操作：

![Center 4][]

上面页面的实现代码：test1.jsp

以下引用了helloweba.com的部分代码：[http://www.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>

[http_layer.layui.com]: http://layer.layui.com/
[Center]: /images/20220727/59c64fb43c1a43ef9794cf7876246645.png
[Center 1]: /images/20220727/0325bcd3c2454d17a6158e8e0940e26e.png
[Center 2]: /images/20220727/49b7401008f14dc2b4a467b52d2436dd.png
[Center 3]: /images/20220727/9d584e8e94424ac6b4cdc9d0a21c02ef.png
[Center 4]: /images/20220727/310baacd4e014625be4618902f16f09a.png
[http_www.helloweba.com]: http://www.helloweba.com