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>
以上这篇对Layer弹窗使用及返回数据接收的实例详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。