layer弹出层的内容页点击按钮跳转到新的页面问题

项目需求中,导入数据后弹出layer弹出层显示管理员登录页,点击登录需跳转至管理页面。原本尝试通过按钮事件关闭弹窗并跳转无效。最终解决办法是在登录按钮的a标签中添加target="_top",实现弹出层内容填充整个浏览器,成功跳转。

在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面。

导入页按钮:

<button type="button" id="start"  class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button>

导入按钮的点击事件,点击后会出现layer弹出层

 $("#start").click(function(){
            // 判断有没有选择区域
            var regionCode = $("#regionCode").val();
            if(regionCode!=0){
                // 获取区域名,用于导入成功后标题显示
                var regionName = $("#regionCode").find("option:selected").text();
                $.ajax({
                    url:'<%=path%>/org/importMemoryOrgs?regionCode='+regionCode,
                    type:'post',
                    dataType:'json',
                    success:function(res){
                        console.log("成功");
                        console.log(res);
                        // 引导用户再次进入导入页,验证效果是下拉框不显示曾经导入过的区域
                        if(res.success == true){
                            layer.open({
                                type: 2 
                                , title: regionName+'党组织架构导入成功'
                                //, area: ['690px', '350px']
                                , area: ['750px', '50%']
                                , shade: 0.5
                                , maxmin: true
                                , content: '<%=path%>/orgAdminLoginPage?username='+regionCode
                            });
                        }else{
                            layer.open({
                                type: 1 //此处以iframe举例
                                , title: regionName+'党组织架构导入失败'
                                //, area: ['690px', '350px']
                                , area: ['750px', '75%']
                                , shade: 0.5
                                , maxmin: true
                                , content: $("#error")
                            });
                            $("#Content").html(res.msg);
                        }
                    },error:function(res){
                        console.log("失败");

                    }
                });
            }else{
                alert("请选择区域");
            }

        });

这里写图片描述

<a class="layui-btn layui-btn-normal" style="margin:0 auto;" href="<%=path%>/areaLogin?username=${username}&&password=123456">以地方组织管理员身份登录</a>

直接这样点击的话,管理页面的内容全部还在弹出层,不是我想要的效果。

解决思路

本来想通过把a标签改成button,然后写个onclick事件,脚本里使用layer.close()去关闭弹出层,然后location.href=”url地址”,试了下没用,本人一直是做后台开发的,前端知识薄弱。

最终解决方案,直接在a标签加上target=”_top”,解决问题。

关于target=”_top”的资料

target=”_top” , 属性作用使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

target=”_parent” ,属性作用使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

target=”_blank” ,浏览器总在一个新打开、未命名的窗口中载入目标文档

target=”_self”, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转都在同一个窗口的核心点)

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值