layer弹窗动态改变标题

最新推荐文章于 2024-04-17 17:24:33 发布

weixin_30508241

最新推荐文章于 2024-04-17 17:24:33 发布

阅读量733

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/pxtgis/p/7833372.html

本文介绍如何使用Layer插件创建iframe弹窗，并在弹窗内动态修改标题的方法。通过获取弹窗对象并设置$(.layui-layer-title)[0].innerText属性实现标题更新。

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

1.利用layer弹出iframe层（type=2）

 1 function ShowKJCX(results) {
 2     ly = layer.open({
 3         type: 2,
 4         id:"KJCX",
 5         skin: 'layui-layer-l LayerCC',
 6         shadeClose: false,
 7         area: ['550px', '600px'],//area: ['400px', '450px'],
 8         shade: 0,
 9         content: '/menu/childPage/layerCC.html',
10         success: function (layero, index) {
11             console.log(layero, index);
12             //$(".layui-layer-title")[0].innerText = "111";
13         },
14         end: function () {//关闭页面时            
15         }
16     });
17 }

2.在弹出的iframe层中再弹出子弹窗，如何在每次切换子弹窗时修改父弹窗的标题？

在弹窗弹出成功success：function (layero, index) {}中获取iframe弹窗对象，设置其$(".layui-layer-title")[0].innerText即可动态修改弹窗标题，前提当前只有一个.layui-layer-title对象，不然多个弹窗标题都改了，有多个弹窗的话增加筛选条件筛选出指定弹窗对象。其中layero参数是弹窗对象，index是弹出索引。

 1 if (cs != undefined) {
 2     var rNum = results.length;//查询结果(500个)
 3     if (rNum > 1000) { rNum = "1000+"; }
 4     parent.lyKJCX = layer.open({
 5         type: 1,
 6         title: false,
 7         closeBtn:false,
 8         skin: 'layui-layer-l',
 9         shadeClose: false,
10         area: ['450px', '600px'],
11         shade: 0,
12         content: $("#KJCXresult_eTableRow"),
13         success: function (layero, index) {
14             parent.$(".layui-layer-title")[0].innerText = '空间查询结果' + '(' + rNum + '个)';
15         },
16         end: function () {//关闭页面时
17             if (parent.lyKJCX != "") {
18                 layer.close(parent.lyKJCX);
19             }
20         }
21     });
22 }