解决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 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jquery 使用点滴函数代码
May 20 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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生成xml简单实例代码
2009/12/16 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
newxtree.js代码
2007/03/13 Javascript
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
使用python实现简单五子棋游戏
2019/06/18 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
python中Lambda表达式详解
2019/11/20 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
介绍java中初始化块的使用
2012/09/11 面试题
秸秆管理实施方案
2014/03/15 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
行政前台岗位职责
2015/04/16 职场文书
公开致歉信
2019/06/24 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python