layer使用

最新推荐文章于 2025-05-28 09:14:26 发布

学海无涯书山有路

最新推荐文章于 2025-05-28 09:14:26 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript插件文章标签： layer弹层

本文链接：https://blog.youkuaiyun.com/u013862108/article/details/77982935

javascript插件专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用Layer插件实现网页中的iframe弹出层功能，并详细讲解了iframe弹出层与主页面之间的JS通信机制，以及如何进行内容刷新和关闭操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 点击打开一个iframe 弹出层

$("#add_group_s").click(function(){
    layer.open({
        title:'选择要奖励的群 --> 选择群成员',
        type: 2,
        area: ['970px', '725px'],
        content: '/coupon/group_widget_s'
    });
});

2. 弹出层内js 与主页面 js交流

for( var x in arr){
    parent.addMember_s(arr[x].data_id,arr[x].data_name,arr[x].data_num,arr[x].data_groupid);
}

addMember_s 是主页面中的函数

3. 弹出层内容刷新，或是用不同地址刷新

if(typeof data_id == 'undefined'){
    alert('请选择一个群！');
}else{
    //location.reload();
    location.replace("/coupon/member_widget_s?group_id="+data_id+"&group_name="+data_name)
}

4. iframe弹出层的，关闭

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

5. 怎么用layer post方式得到html内容？

好像插件没提供，折中方式如下：

function lookMember(timestamp){
    var uid_str = $("#batch_uid_"+timestamp).val();
    $.post("/coupon/userInfo_widget",{uid_str:uid_str},function(result){
        alert(result);
            layer.open({
              type: 1,//弹出框类型
              title: '查看包含的用户',
              shadeClose: false, //点击遮罩关闭层
              //area : ['60%' , '90%'],
              area: ['500px', ''],
              shift:1,
              content: result//将结果页面放入layer弹出层中
          });
      },'html');

}