layui的layer弹出层的iframe页面回调

2023-11-08实例代码
132

示例代码:
$("#ChoiceBank").click(function () {
    var width = $("#content").css("Width");
    layer.open({
        type: 2,
        title: '开户银行选择',
        area: [width, '380px'],
        content: ['/Bank.aspx', 'no'],
        btn: ['确定', '取消'],
        yes: function (index, layero) {
            var body = layer.getChildFrame('body', index);  //此处我理解的是加载目标页面的内容
            $("#当前页面需要设置的元素").val(body.find('#h_bankName').val());  //查到目标页面的内容赋给当前页面元素
            layer.close(index);//这块是点击确定关闭这个弹出层
        }
    });
});

通过layer.getChildFrame('body', index);的方式,得到DOM元素,然后查找,可以得到返回值。

当然这个返回值得在iframe中设定好。

另外一种方式就是通过回调函数来传递。

layer.open({
    type: 2,
    title: "设置围栏",
    shadeClose: true,
    shade: 0.4,
    area: ['90%', '90%'],
    content: "/ElectronicFence/Map?id=" + id + "&shapeType=" + shapeType,
    btn: ['确定','关闭'],
    yes: function(index){
        //当点击‘确定’按钮的时候,获取弹出层返回的值
        var res = window["layui-layer-iframe" + index].callbackdata();
        //打印返回的值,看是否有我们想返回的值。
        console.log(res);
        //最后关闭弹出层
        layer.close(index);
    },
    cancel: function(){
        //右上角关闭回调
    }
});
var res = window["layui-layer-iframe" + index].callbackdata();
这行代码中‘callbackdata’是弹出层里面定义的函数。也许我们知道了什么!这个函数的作用就是返回值。
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //在地图中添加MouseTool插件
    var mouseTool = new AMap.MouseTool(map);
    AMap.event.addDomListener(document.getElementById('point'), 'click', function () {
        mouseTool.marker({ offset: new AMap.Pixel(-14, -11) });
    }, false);
    AMap.event.addDomListener(document.getElementById('line'), 'click', function () {
        mouseTool.polyline();
    }, false);
    AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
        mouseTool.polygon();
    }, false);


    var callbackdata = function () {
        var data = {
            username: 'zhangfj'
        };
        return data;
    }
</script>
 
The End

相关推荐

layui后台布局实例代码
layui后台布局的实例代码,以下是详细代码: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlelayout 后台大布局 - Layui/title link rel="stylesheet" ...
2025-10-15 实例代码
68

可自动切换的tab实例代码
可自动切换的tab实例代码,html代码如下: !-- tab标签代码begin --div class="tab1" id="tab1" div class="menu" ul li id="one1" onclick="setTab('one',1)"新闻/li li id="one2" onclick="setTab('one',2)"活动/li li id="one3" onclick="setTab('one',3)"...
2025-09-16 实例代码
114

php数据处理:数组根据某字段进行分组
php数据处理:数组根据某字段进行分组,实例代码如下: /** * @description:根据数据 * @param {dataArr:需要分组的数据;keyStr:分组依据} * @return: */ protected function dataGroup(array $dataArr,string $keyStr) :array { $newArr=[]; foreach ($data...
2025-06-12 实例代码
188

LayUI登录页面页设计实例
实例代码如下: !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" link rel="stylesheet" href="layui/css/layui.css" style type="text/css" .container{ width: 420px; height: 320px; min-height: 320px; max-height: 320px; position: absolute; t...
2025-04-13 实例代码
234

MUI Picker Input设置默认时间回显实例代码
MUI Picker Input设置默认时间回显实例代码 mui('body').on('tap', '#begTime', function () { //日期选择 var dtPicker = new mui.DtPicker({ type: 'date' }); /*参数:'datetime'-完整日期视图(年月日时分) 'date'--年视图(年月日) 'time' --时间视图(时分...
2025-01-09 实例代码
139

layui实现带清除按钮的输入框
layui实现带清除按钮的输入框,首先html文件如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" title测试 - layui/title link rel="stylesheet" href="layui/css/lay...
2024-12-31 实例代码
200