layui 父页面弹窗调用子页面的方法

最新推荐文章于 2024-02-29 17:38:27 发布

原创最新推荐文章于 2024-02-29 17:38:27 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #ecmascript

layui 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现页面元素的样式控制，特别是针对弹窗的功能。文中展示了cursorLayer和openLayer两个函数，用于添加和移除CSS类以改变元素的光标样式。此外，还展示了如何在弹窗中引用外部页面，并通过iframe调用子页面的方法，实现在弹窗内的交互操作，如页面锁定和提交申请。

           //子页面方法，最好写到子页面js文件的外面，全局变量申明的位置，不然会提示找不到方法
           cursorLayer=function(){
   			 $('#ddApplyAgainDia').addClass('cursor');
			}
			
		   openLayer=function(){
		        $('#ddApplyAgainDia').removeClass('cursor');
		    }
        // 这个例子是弹窗中引用了另一个页面，给弹窗内页面添加css样式
            var setlayer = layer.open({
                type: 2 //此处以iframe举例
                , title: tabName
                , skin: 'layer-ext-blue'
                , area: ['1050px',height]
                , shade: 0.4
                , maxmin: false
                , moveType: 0 //拖拽模式，0或者1
                , content: '../data.html' //这里content是一个DOM，
                ,success: function (layero,index) {//这里写layero和index的顺序不能，注意一下
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];//获得iframe页的窗口对象，执行iframe页的方法：
                    iframeWin.cursorLayer();//调用子页面的方法，页面锁定
                }
                ,cancel:function (index,layero){//这里写layero和index的顺序不能，注意一下
                {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']];//获得iframe页的窗口对象，执行iframe页的方法：
                    iframeWin.openLayer();//调用子页面的方法，提交申请
                    layer.closeAll();
                }
            });