解决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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
jquery easyui使用心得
Jul 07 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
vue props对象validator自定义函数实例
Nov 13 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实现小偷程序实例
2016/10/31 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python学习开发mock接口
2019/04/28 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python实现一个优先级队列的方法
2020/07/31 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
顶岗实习接收函
2014/01/09 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
竞争上岗实施方案
2014/03/21 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
文明班级申报材料
2014/12/24 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Go语言基础函数基本用法及示例详解
2021/11/17 Golang