关于Layer弹窗使用及返回数据接收

Layer做为弹窗,主页面代码:
注意1. callback()方法 返回字符串,再data:JSON.parse(res)转为ajax提交时的json参数
注意2. textarea 上使用append方法没有效果,改写: var str = $("#area").val() + “\n”+d; $("#area").val(str);

//引入js  必须要有(1.8以上版本) jquery 
   <script src="__PUBLIC__/js/jquery.js"></script>
  <script type="text/javascript" src="__PUBLIC__/js/layer/layer.js"></script>
  
//点击事件,弹出窗口
function openCitySelect(){
	   layer.open({
           type: 2,   //以frame型式加载content页面
           title: "设置区域",
           shadeClose: true,
           shade: 0.4,
           area: ['90%', '90%'],
           content: "{:U('user/index/citylist')}",   //指向页面
           btn: ['选择城市','追加城市','关闭'],   //底部按钮
           yes: function(index){
               //当点击‘选择城市’按钮的时候,获取弹出层返回的值 
               var res = window["layui-layer-iframe" + index].callback();
               //打印返回的值,看是否有我们想返回的值。              
               $.ajax({
	                url:"{:U('user/index/getListOfCity')}",
	                type:"post",
	                data:JSON.parse(res),
                  success:function(data){  	 
	                    //console.log(data);
	                  var a = JSON.parse(data);
	                b = a.length;
	                if (0 >= b) {
	                    Wind.use('artDialog',function(){
	                      art.dialog({
	                        id : "alert",
	                        icon : "error",
	                        content : "请至少选择一个地区",
	                        ok : function() {}
	                      });
	                    });
	                }else {
	                        var thisCitys =  JSON.parse(data);
	    					var d="";
	    					var new_arr = []; 					
	                       for (var f = 0; f < thisCitys.length; f++) {                	 
	                    	      if($.inArray(thisCitys[f],new_arr)==-1) {    	                    	    	  
	                    	    		  new_arr.push(thisCitys[f]);  	                    	    	
	                    	        }
	                       }
	                       //去重
	                       for(var i=0;i<new_arr.length; i++){
	                    	   d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
	                       }
	                            // }
	                    
	                        $("#area").val(d);
	                  
	                   lineTotal('area');
	                }  
	                },
	                error:function(e){
	                    alert("错误!!");  	                    
	                }
	            });  
               //最后关闭弹出层
               layer.close(index);
           },
           btn2:function(index){
        	   //当点击‘追加城市’按钮的时候,获取弹出层返回的值
               var res = window["layui-layer-iframe" + index].callback();
               //打印返回的值,看是否有我们想返回的值。
              
               $.ajax({
 	                url:"{:U('user/index/getListOfCity')}",
 	                type:"post",
 	                data:JSON.parse(res),
                   success:function(data){  	 
 	                    //console.log(data);
 	                  var a = JSON.parse(data);
 	                b = a.length;
 	                if (0 >= b) {
 	                    Wind.use('artDialog',function(){
 	                      art.dialog({
 	                        id : "alert",
 	                        icon : "error",
 	                        content : "请至少选择一个地区",
 	                        ok : function() {}
 	                      });
 	                    });
 	                }else {
 	                        var thisCitys =  JSON.parse(data);
 	    					var d="";
 	    					var new_arr = []; 					
 	                       for (var f = 0; f < thisCitys.length; f++) {                	 
 	                    	      if($.inArray(thisCitys[f],new_arr)==-1) {    	                    	    	  
 	                    	    		  new_arr.push(thisCitys[f]);  	                    	    	
 	                    	        }
 	                       }
 	                       //去重
 	                       for(var i=0;i<new_arr.length; i++){
 	                    	   d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])
 	                       }
 	                            // }
 	                      var str = $("#area").val() + "\n"+d; 	
 	                     console.log(str);
 	                      $("#area").val(str);
 	                  
 	                   lineTotal('area');
 	                }  
 	                },
 	                error:function(e){
 	                    alert("错误!!");  	                    
 	                }
 	            });  
               //最后关闭弹出层
               layer.close(index);
           },
           cancel: function(){
               //右上角关闭回调
           }
       });
  }

弹窗页面的代码:
注意: window.callback 用来将数据返回到主页

<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
 <script>        
 		
        //加载模块 	     	    
  	    layui.use('form', function(){          
         var $ = layui.jquery, form = layui.form ; 
        //返回数据的方法, 在layui中 用window.前缀可以被外面访问到.
          window.callback = function() {
				var arr = new Array();
				$("#province :checkbox[checked]").each(function(i){
					arr[i] = $(this).val();
				});
				var vals = arr.join(",");
				var has_pro = $("#pro").is(':checked')?1:0;
				var has_city = $("#city").is(':checked')?1:0;
				var has_county = $("#county").is(':checked')?1:0;
				var has_end = $("#short_name").is(':checked')?1:0;
				var has_and_pro = $("#pro_city").is(':checked')?1:0;
				var has_and_city = $("#city_county").is(':checked')?1:0;
				var result = '{ "provinces":" ' + vals + '","has_pro":"' + has_pro + '","has_city":"' + has_city + '","has_county":"' + has_county 
					+ '","has_end":"' + has_end + '","has_and_pro":"' + has_and_pro + '","has_and_city":"' + has_and_city  + '"}';
				return result;
        };
     });  	  
  	 
    	</script> 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个用于创建交互式地图的JavaScript库。您提到的"openlayer弹窗"可能是指在OpenLayers地图中创建弹窗窗口的功能。 首先,为了创建OpenLayers弹窗,您需要一个DOM对象来承载弹窗内容。这可以通过在HTML页面中添加一个具有唯一ID的div元素来实现。该div元素将用作OpenLayers弹窗的容器。您可以在该div元素中添加其他元素,以定义弹窗的样式和内容。 为了定义弹窗的样式,您可以使用CSS来设置div元素的样式属性。您可以为弹窗容器div添加类名或直接为其设置样式属性。通过设置宽度、高度、背景颜色、边框样式等属性,您可以自定义弹窗的外观。 一旦您创建了弹窗容器和定义了其样式,您可以使用OpenLayers中的功能来处理弹窗的显示和关闭事件。通过监听地图上的特定事件,例如单击地图上的某个要素或位置,您可以触发弹窗的显示。在弹窗显示之后,您可以向其添加标题和内容。 在OpenLayers中,您可以使用Overlay类来实现弹窗的显示和关闭机制。Overlay类提供了打开和关闭弹窗的方法,以及设置弹窗内容的方法。通过将弹窗容器div作为Overlay的元素,您可以将其与地图关联起来,并实现在特定事件触发时显示弹窗。 总结一下,创建OpenLayers弹窗的步骤如下: 1. 在HTML页面中创建一个div元素,作为弹窗容器,并为其添加唯一的ID。 2. 使用CSS设置div元素的样式,以定义弹窗的外观。 3. 在OpenLayers中创建一个Overlay对象,将弹窗容器div作为其元素。 4. 监听地图上的特定事件,例如单击事件,当事件触发时,调用Overlay的打开方法以显示弹窗。 5. 在弹窗显示后,使用JavaScript动态添加标题和内容。 需要注意的是,弹窗的具体实现可能因您使用的OpenLayers版本和您的需求而有所不同。请确保参考OpenLayers的官方文档和示例代码以获取更详细和准确的信息。 参考资料: 目录 一、定义popup弹窗dom对象二、定义弹窗样式三、定义Overlay四、设置单击地图后弹窗显示信息五、设置弹窗关闭事件 要展示弹窗,我们首先需要一个dom对象来承载。 <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer" onclick="closePopup();"></a> <div id="popup-title" class="popup-title"></div> <div id="popup-content" class="popup-content"></div> </div> 二、定义弹窗样式 layer弹窗:top.layer弹窗到父页面跨域,通过postMessage方法将子页面的配置对象发送到父页面中,父页面再通过子页面的配置对象打开弹窗,对象内不能存在事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值