解决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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
深入理解js数组的sort排序
May 28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
canvas 实现中国象棋
Feb 17 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
JS全角与半角转化实例(分享)
Jul 04 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
无故旷工检讨书
2014/01/26 职场文书
施工安全承诺书
2014/05/22 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL