解决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 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
用PHP代码给图片加水印
2015/07/01 PHP
理解javascript回调函数
2014/12/28 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
从零学Python之引用和类属性的初步理解
2014/05/15 Python
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
numpy排序与集合运算用法示例
2017/12/15 Python
python 产生token及token验证的方法
2018/12/26 Python
Python3 翻转二叉树的实现
2019/09/30 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
计算机专业个人求职信范例
2013/09/23 职场文书
《阳光》教学反思
2014/02/23 职场文书
图书馆标语
2014/06/19 职场文书
少先队中队工作总结
2015/08/14 职场文书
初一数学教学反思
2016/02/17 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android