解决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
Mar 09 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
浅谈Node.js之异步流控制
Oct 25 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 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实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
js解决movebox移动问题
2016/03/29 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Vue.js用法详解
2017/11/13 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
教师业务学习制度
2014/01/25 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
关于安全的标语
2014/06/10 职场文书
司法助理专业自荐书
2014/06/13 职场文书
运动会演讲稿100字
2014/08/25 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书