解决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处理table表格的代码
Dec 06 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
javascript关于继承解析
May 10 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
Javascript浅谈之this
2013/12/17 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript闭包的理解
2015/04/01 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python实现五子棋小程序
2019/06/18 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
《池塘边的叫声》教学反思
2014/04/12 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年司法局工作总结
2014/12/11 职场文书
音乐研修感悟
2015/11/18 职场文书