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


Posted in Javascript onSeptember 14, 2019

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

导入页按钮:

<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("请选择区域");
   }

  });

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

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

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

解决思路

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

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

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

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

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

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

以上这篇解决layer弹出层的内容页点击按钮跳转到新的页面问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
JS事件绑定的常用方式实例总结
Mar 02 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
vue登录注册实例详解
Sep 14 #Javascript
javascript合并两个数组最简单的实现方法
Sep 14 #Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 #Javascript
Layui表格行工具事件与数据回填方法
Sep 13 #Javascript
layui使用表格渲染获取行数据的例子
Sep 13 #Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
You might like
php 短链接算法收集与分析
2011/12/30 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
JavaScript 事件系统
2010/07/22 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
python基础教程之字典操作详解
2014/03/25 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
小区消防演习方案
2014/02/21 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
创业计划书之面包店
2019/09/12 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript