這篇文章給大家分享的是有關(guān)Layer如何做彈窗使用及返回數(shù)據(jù)接收的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),遼源企業(yè)網(wǎng)站建設(shè),遼源品牌網(wǎng)站建設(shè),網(wǎng)站定制,遼源網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,遼源網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

Layer做為彈窗，主頁面代碼：

注意1. callback()方法 返回字符串，再data:JSON.parse(res)轉(zhuǎn)為ajax提交時的json參數(shù)

注意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: "設(shè)置區(qū)域",
   shadeClose: true,
   shade: 0.4,
   area: ['90%', '90%'],
   content: "{:U('user/index/citylist')}", //指向頁面
   btn: ['選擇城市','追加城市','關(guān)閉'], //底部按鈕
   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 : "請至少選擇一個地區(qū)",
	      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("錯誤?。?quot;); 	     
	    }
	   }); 
    //最后關(guān)閉彈出層
    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 : "請至少選擇一個地區(qū)",
 	      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("錯誤??！"); 	     
 	    }
 	   }); 
    //最后關(guān)閉彈出層
    layer.close(index);
   },
   cancel: function(){
    //右上角關(guān)閉回調(diào)
   }
  });
 }

彈窗頁面的代碼:

注意: window.callback 用來將數(shù)據(jù)返回到主頁

<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
 <script>  
 		
  //加載模塊 	  	 
 	 layui.use('form', function(){   
   var $ = layui.jquery, form = layui.form ; 
  //返回數(shù)據(jù)的方法, 在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>

感謝各位的閱讀！關(guān)于“Layer如何做彈窗使用及返回數(shù)據(jù)接收”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：Layer如何做彈窗使用及返回數(shù)據(jù)接收
網(wǎng)站地址：http://jinyejixie.com/article48/pdcsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、手機網(wǎng)站建設(shè)、網(wǎng)站改版、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)